Margin :0 auto; margin:0 auto; margin:0 auto; Or text – align: center; , you can easily solve the problem of horizontal centering, but the most troubling alignment problem of all time is the annoying “vertical centering” setting. Here are seven ways to use vertical centering purely with CSS.

Seven vertically centered ways

  • Set line height
  • Adding pseudo-elements
  • Calc dynamic computation
  • Use or pretend to use a form
  • transform
  • Absolute positioning
  • Using Flexbox

Set line height

The easiest way to center a line is to center it vertically. This works for inline, inline-block elements, such as the title of a single line, or div that has been set to inline-block. If line-height is set to the same value as height, The contents of the line element will be vertically centered, because it is the line height, so add 1/2 of the line height above and below the line element, so it is vertically centered! But you can see why you have to have a single-line inline element, because if you have multiple lines, the space between the second and first lines will become too large, which is not what you want. CSS examples:

.div0{
  width:200px;
  height:150px;
  border:1px solid # 000;
  line-height:150px;
  text-align:center;
}
.redbox{
  display:inline-block;
  width:30px;
  height:30px;
  background:#c00;
}Copy the code

Add pseudo-elements (::before, ::after)

The first method, although the simplest (for single-line headings), is single-line only, so if we want multi-line elements to be vertically centered, we have to use pseudo-element methods. Before we do that, let’s explain the vertical-align property in CSS. This property is vertically centered, but it means that all elements in an element are vertically centered with each other, not vertically centered with respect to the height of the box. (The CSS below creates a vertical center like this)

.div0{
  width:200px;
  height:150px;
  border:1px solid # 000;
  text-align:center;
}
.redbox{
  width:30px;
  height:30px;
  background:#c00;
  display:inline-block;
  vertical-align:middle;
}
.greenbox{
  width:30px;
  height:60px;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}
.bluebox{
  width:30px;
  height:40px;
  background:#00f;
  display:inline-block;
  vertical-align:middle;
}Copy the code

Thus, if one of the squares becomes 100% tall, the other squares are truly vertically centered.

.greenbox{
  width:30px;
  height:100%;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}Copy the code

But we can’t add a weird div every time we want to center it vertically! So let’s focus on the “fake elements”. Add a div to the bar using ::before and ::after. Make this “fake” div 100% high, and you can easily center all the other divs. But, but, but! Div remember to set display to inline-block, after all vertical-align:middle; For inline elements, div itself is a block, so you have to change it!

.div0::before{
  content:' ';
  width:0;
  height:100%;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background:#f00;
}Copy the code

Calc dynamic computation

If you look over here and you’re wondering, if my div has to be a block today, how do I center it vertically? At this time, we must use the unique dynamic computing capability of CSS CALC. We can center the top attribute of the div vertically as long as the distance between the top attribute and the top is “50% of the height of the outer frame – 50% of the height of the div”. As for why we do not use margin-top, because margin is relative to the horizontal width, You have to use top to get it right.

.div0{
  width:200px;
  height:150px;
  border:1px solid # 000;
}
.redbox{
  position:relative;
  width:30px;
  height:30px;
  background:#c00;
  float:left;
  top:calc(50% - 15px);
  margin-left:calc(50% - 45px);
}
.greenbox{
  position:relative;
  width:30px;
  height:80px;
  background:#0c0;
  float:left;
  top:calc(50% - 40px);
}
.bluebox{
  position:relative;
  width:30px;
  height:40px;
  background:#00f;
  float:left;
  top:calc(50% - 20px);
}Copy the code

Use or pretend to use a form

Some of you may find it fairly easy to center a table in the DOM, which is common in HTML. Just follow the next line vertical-align:middle. Why? The main reason is that the display of table is table, while the display of TD is table-cell. Therefore, we can not only use the table directly, but also change the display of the parent element of the vertically centered element to table-cell, which can be easily achieved. However, changing display can sometimes cause other style attributes to be linked, so be careful. HTML:

<table>
    <tr>
        <td>
            <div>The table is vertically centered</div>
        </td>
    </tr>
</table>
<div class="like-table">
    <div>The fake table is vertically centered</div>
</div>Copy the code

CSS:

.like-table{
    display:table-cell;
}
td..like-table{
    width:150px;
    height:100px;
    border:1px solid # 000;
    vertical-align: middle;
}
td div..like-table div{
    width:100px;
    height:50px;
    margin:0 auto;
    color:#fff;
    font-size:12px;
    line-height: 50px;
    text-align: center;
    background:#c00;
}
.like-table div{
    background:# 069;
}Copy the code

transform

Transform is a new attribute of CSS 3, the main deformation, displacement, rotation and in charge of the elements using the transform in translateY (change the vertical displacement, if you use a percentage for the unit, with the width of the element itself as the benchmark), tie-in top attribute of the element itself, can make vertical centered effect, Note that the child element must be added position:relative, otherwise it will not work.

.use-transform{
    width:200px;
    height:200px;
    border:1px solid # 000;
}
.use-transform div{
    position: relative;
    width:100px;
    height:50px;
    top:50%;
    transform:translateY(50%);background:# 095;
}Copy the code

Absolute positioning

Margin :auto margin:auto Margin :auto Margin :auto margin:auto margin:auto margin:auto margin:auto margin:auto margin:auto margin:auto margin:auto margin:auto margin Set absolute position of the child element. Its parent element must be given position as relative. Also, absolutely positioned elements overwrite each other, so if you have a lot of content elements, there may be some problems.

.use-absolute{
    position: relative;
    width:200px;
    height:150px;
    border:1px solid # 000;
}
.use-absolute div{
    position: absolute;
    width:100px;
    height:50px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#f60;
}Copy the code

Using Flexbox

Using the align-items or align-Content properties, you can easily center vertically.

.use-flexbox{
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:150px;
    border:1px solid # 000;
}
.use-flexbox div{
    width:100px;
    height:50px;
    background:# 099;
}Copy the code

So these are some vertical center methods, because vertical center is often used to modify the display property, it often has some typographical implications, for example, if you use flexbox where you shouldn’t use flexbox, if you use table where you shouldn’t use table, If you use inline-block where you shouldn’t use it, then you’ll have to write a lot of other positioning styles to fix it. So how to use these vertical centring CSS methods depends on your layout structure.