Summarize using CSS to set elements vertically centered

As the front-end siege division, in the production of Web pages have encountered CSS production horizontal vertical Center, I think we have studied or written, especially the vertical center, but also let people worry, the following this article mainly summarizes the use of CSS to set the vertical center of the solution method, With these methods to worry about, the need for friends can refer to.

Objective

The vertical center of the element is also our daily page layout often encounter problems, this article mainly introduces the use of CSS to set the vertical center of the solution, the article introduces a variety of solutions to the situation, I am sure to encounter this problem of friends bring certain help, the following words do not say much, Let's take a look at the detailed introduction.

HTML code:

<p class= "Parent" ><p class= "Child" >text here</p></p>

Now that you've set the vertical center of the child element, you know the height of the parent element to know where it is, right? Just as you want to stop in the middle of a distance, you first need to know how long the distance is, and you know where the middle position is.
Note that all of my percentages are high and wide and are built on html,body {width: 100%;height: 100%;} top of such settings, if you do not have this set. Parent of this p is also body,body you do not set the width height, you may not see the effect. The aspect ratio of parent is relative to its parent element, so you need to be sure when you use it. The parent of this p is set to width and height.

(1) Vertical center of text in line

CSS code:

. parent {    height:100px;    border:1px solid #ccc; /* Set border for easy viewing of effects */}.child {    line-height:100px;}

(2) Inline non-text vertical centering (img for example)

HTML code:

<p class= "Parent" >    </p>

CSS Code

. parent {    height:100px;    border:1px solid #ccc; /* Set border for easy viewing effects */}.parent img {    //Note at this point you should ensure that the height of the image itself or you set the height is less than the parent element of the 200px row height, otherwise you can not see the effect of the center.    line-height:100px;}

(3) block-level element with unknown height centered vertically

HTML code:

<p class= "Parent" >  <p class= "Child" >    <!--. the height of child is unknown, the parent element should have height--and    Sddvsds DFVSDVDS  </p></p>

The first method (does not need to add padding):

CSS code:

. parent {  width:100%;  height:100%;  position:relative;  /*display:table;*/}.child {  width:500px;  border:1px solid #ccc; /* Set border for easy viewing of effects */  Position:absolute;  top:50%;  Transform:translatey (-50%);}

The second method (do not use transform):

CSS code:

. parent {    position:relative;    width:100%;    height:100%;}. Child {  width:500px;  border:1px solid #ccc;  Position:absolute;  top:0;  bottom:0;  left:0;  right:0;  height:30%;  Margin:auto;}

Third method (need to add padding):

CSS code:

#parent {  padding:5% 0;} #child {  padding:10% 0;}

The fourth method:

(using Display:table, this method also applies to the center of the inline text element):

CSS code:

. parent {  width:100%;  height:100%;  display:table;}. Child {  Display:table-cell;  Vertical-align:middle;}

The fifth method (Flex layout, here need to consider compatibility AO!)

CSS code:

. parent {    width:100%;    height:100%; /* Be sure to write highly Austrian!*/    Display:flex here;    Align-items:center;    Justify-content:center;  }

(4) The block-level element of the known height is centered vertically

HTML code:

<p class= "Parent" >  <p class= "Child" >    <!--. child height known, parent element height known--    Sddvsds DFVSDVDS  </p></p>

CSS code:

#parent {  height:300px;} #child {  height:40px;  margin-top:130px; /* This is calculated only for the height of the parent element minus the height of this element divided by two */  border:1px solid #ccc;}