Teach you 10 ways to center horizontally and vertically in CSS (summary)

A must-have for interviews, you will definitely use it at work. Emmm, everyone understands it. Without further ado, I will just post a summary and a rendering.

Summarize

• The PC side has compatibility requirements, the sub-element width and height are fixed, and absolute + negative margin is recommended
• The PC side has compatibility requirements, the width and height of the sub-element are not fixed, absolute + transform is recommended
• No compatibility requirement on PC side, flex is recommended
• Flex is recommended for mobile devices

How to achieve the effect of the picture above? Here are 10 commonly used methods. First, I create a common template style

<template>
  <div class="two">
    <div class="parent">
      <div class="child">123</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.parent{
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  box-sizing: border-box;
  .child {
    height: 100px;
    width: 100px;
    background: #2f8df0;
  }
}
</style>

Then the specific styles used are written separately in the method. First, 4 daily layout techniques are introduced.

1. Horizontally center the div inside the div and set the width of the child elements.

.parent{
	width:300px;
    margin:0 auto;
}

Note: If the child element sets display:table-cell , margin:0 auto; will be invalid.

2. Set the text to be vertically centered and set the height of the div containing the text.

.child{
    text-align: center
    line-height:100px //Knowing the height of the child element, set the same height as the height}

3. Two or more block-level elements are vertically centered, and the parent element sets height and line-height to be equal.

 .parent{
     line-height: 300px; //Know the height of the parent element, set the same height as the height }
   .child1{
    display: inline-block;
    vertical-align: middle;
    line-height: initial; //The initial keyword is used to set a CSS property to its default value.
   }
   .child2{
    display: inline-block;
    vertical-align: middle;
    line-height: initial; //The initial keyword is used to set a CSS property to its default value.
   }

4. Let an element fill the entire current container and set absolute

.parent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

OK, that's it. Now let's start with how to achieve horizontal and vertical centering with CSS.

1. You don’t need to set the width and height of the child element, you need to set the height of the parent element. Use absolute + transform (recommended)

.parent{
   position: relative 
}
.child{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

// Note: if you only need to center it up and down, just keep top; if you only need to center it left and right, keep left. Set translateY(-50%) or translateX(-50%)

2. There is no need to set the width and height of the child elements, and there is no need to set the width and height of the parent element. Use flex layout (it is recommended to use flex directly on mobile devices
The PC side needs to see what compatibility is required. ）

.parent{
  display:flex;
  align-items:center;
  justify-content:center;
}
.child{
 
}

3. You don’t need to set the width and height of the child element, but you need to set the height of the parent element. Use lineheight .
Note: This method requires resetting the text display to the desired effect in the child element through text-align

.parent{
    line-height: 300px; //Set the height to the same as the parent element text-align: center;
}
.child{
    display: inline-block;
    vertical-align: middle;
    line-height: initial; //The initial keyword is used to set a CSS property to its default value.
    text-align: left; //Reset the text display to the desired effect}

4. You don’t need to set the width and height of the child element, but you need to set the height of the parent element. Use css-table ( margin:0 auto of this element will become invalid after using it)

.parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child{
  display: inline-block;
}

5. Set the width and height of the child element, and set the height of the parent element. Use absolute + negative margin

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; //Know the width and height of the sub-element margin-top: -50px; //Know the width and height of the sub-element}

6. Set the width and height of the child element, and set the height of the parent element. Use absolute + margin auto

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

7. Set the width and height of the child element, and set the height of the parent element. Use absolute + calc (this method's compatibility depends on the compatibility of calc)

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

8. Use writing-mode (more complicated to use, not recommended)

 // Common styles are at the top <div class="parent">
      <div class="box-child">
        <div class="child">123</div>
      </div>
    </div>

.parent{
     writing-mode: vertical-lr; //Change the direction of text display text-align: center;
}
.box-child{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.child{
    text-align: left; //Reset the text display to the desired effect margin: 0 auto;
}

9. There is no need to set the width and height of child elements, and there is no need to set the width and height of parent elements. Use grid layout (not recommended, currently the compatibility is not very good)

.parent{
    display: grid;
}
.child{
     align-self: center;
     justify-self: center;
}

10. Use table layout (purely a method, who still uses table layout these days, hahahaha)

<table>
    <tbody>
        <tr>
            <td class="parent">
                <div class="child">123</div>
            </td>
        </tr>
    </tbody>
</table>

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.