Example analysis of CSS text and div Vertical centering method

In style layouts, we often encounter the need to center elements. The horizontal centering of elements through CSS is simple: for text, you only need to set text-align:center for its parent element, and for block-level elements such as p, you only need to set its left and right margin values to auto. To implement the vertical centering of an element, one might think of the Vertical-align property in CSS, but it only takes effect on elements that have valign attributes, such as <td>, <th>, <caption>, and so on in table elements, as Elements such as <p> and <span> have no valign characteristics, so using vertical-align does not work for them. So we need to use other methods to achieve the vertical center of the element, below I summarize several common vertical centering methods.

Single-line text vertically centered

For single-line text, we only need to make the text line height (line-height) and the height of the region at the same level:

<!--HTML code--    <p id= "P1" >        this is a single line of text vertically centered       </p>/*css code */           #p1 {               width:300px;               height:100px;               margin:50px Auto;               border:1px solid red;               line-height:100px; /* Set Line-height to be equal to the height of the parent element */               text-align:center;/* Set text horizontally centered *               /overflow:hidden;/* prevent content from exceeding the container or creating a newline */           }

Multi-line text vertically centered

The vertical center of multiline text is divided into two cases, one of which is the height of the parent element is not fixed, as the content changes, and the other is the parent element height is fixed.

Parent element height is non-fixed

When the parent height is not fixed, the height can only be stretched through the inner text. In this way, we can set the value of the inner padding (padding) to make the text appear vertically centered, just set the values of Padding-top and Padding-bottom equal:

<!--HTML code--<p id= "P1" > This is the multiline text centered vertically, which is the multiline text vertically centered, which is the multiline text vertically centered               ,               which is the multiline text vertically centered.       </P>/*CSS Code */           #p1 {               width:300px;               margin:50px Auto;               border:1px solid red;               Text-align:center; /* Set Text Horizontally center */               padding:50px 20px;           }

Parent element Height-invariant

This article first mentions the Vertical-align property in CSS, but it only takes effect on elements that have valign attributes, and in combination with display:table, you can make P simulate the table property. So we can set the display property of the parent p: display:table;; then add a p containing the text content, set its Display:table-cell, and vertical-align:middle;. The specific code is as follows:

<!--HTML code--    <p id= "outer" >        <p id= "Middle" >            this is a fixed height multi-line text vertically centered,               which is fixed height multiline text vertically centered,               This is fixed height multi-line text vertically centered,               which is fixed height multiline text vertically centered.           </p>    </p>/*css code */           #outer {               width:400px;               height:200px;               margin:50px Auto;               border:1px solid red;               display:table;           }           #middle {                Display:table-cell;                Vertical-align:middle;                 Text-align:center; /* Set text horizontally centered */                 width:100%;              }

However, the results shown in IE7 are as follows:

This is because IE7 and the following versions do not support the Display:table and Display:table-cell properties Well, of course, if you do not consider IE7 the following version of the browser, the above method can be achieved vertically centered. If we take IE7 and the following versions into account, we can set the properties for different browsers by using the knowledge of CSS hack.

<!--HTML code--<p id= "outer" > <p id= "Middle" > <p id= "Content" > This is fixed height multiline text vertically centered (compatible with IE7), which is fixed height multiline text vertically centered (compatible IE7), which is               Fixed height multiline text vertically centered (compatible with IE7), which is fixed height multiline text vertically centered (compatible with IE7).               </p> </p> </P>/*CSS Code */#outer {width:400px;               height:200px;               margin:50px Auto;               border:1px solid red;               display:table;  *position:relative;                Compatible with IE7 and the following versions} #middle {Display:table-cell;                 Vertical-align:middle; Text-align:center;               /* Set text horizontally centered */width:100%;   *position:absolute;             Compatible with IE7 and the following version *top:50%;  } #content {*position:relative;             Compatible with IE7 and the following version *top:-50%; }

Sub P Vertical Center

1. Set the offset according to the specific size of the sub p

If the child p is fixed, set the horizontal and vertical offset to 50% of the parent element, and then move the child elements up and to the left by the actual length to half the size

<!--HTML code    --<p id= "outer" >        <p id= "Middle" >            sub P (fixed size) Vertical Center           </p>    </ P>/*CSS code *           /#outer {                   background-color: #13CDF4;                   width:300px;                   height:200px;                   position:relative;           }           #middle {                    background-color: #E41627;                   width:100px;                   height:100px;                   Margin:auto;                   Position:absolute;                   left:50%;                    top:50%;                   Margin-left: -50px;                   Margin-top: -50px;           }

This method is compatible with IE7, IE6, but only for fixed cases where the sub-p size is valid. Most of the time, the size of the sub-p is not fixed, the following describes the size of the child p is not fixed when the method. As the display effect is basically the same as this effect, it is not affixed to each other, the reader can copy the code verification themselves.

2. Using Translate

After 50% of the parent element is offset horizontally and vertically for the first method, the margin value is not set, but the value of translate is set using the Transform property in addition to CSS3, and the CSS Code section is changed to the following:

#middle {            background-color: #E41627;           width:100px;           height:100px;           Margin:auto;           Position:absolute;           left:50%;            top:50%;           Transform:translatex ( -50%) Translatey ( -50%);           -webkit-transform:translatex ( -50%) Translatey ( -50%);       }

This method needs to be aware that transform is a property in CSS3, and when used with the browser's compatibility, the IE9 version is not supported.

3, the use of absolute layout absolute

<!--HTML code--    <p id= "outer" >        <p id= "middle" >            use absolute positioning to implement a sub p size that is not fixed vertically centering           </p>    </P>/*CSS Code *           /#outer {               background-color: #13CDF4;               width:300px;               height:200px;               position:relative;           }           #middle {                background-color: #E41627;               width:100px;   Sub-p size can be arbitrarily set               height:100px;               Margin:auto;               Position:absolute;               top:0;left:0;right:0;bottom:0;           }

This method is incompatible with IE7, IE6

4. Using Vertical-align

<!--HTML-    <p id= "outer" >        <p id= "Middle" > The            sub-p size is not fixed vertically centered           with the vertical-align attribute </p>    </P>/*CSS Code *           /#outer {               background-color: #13CDF4;               width:300px;               height:200px;               Display:table-cell;                Vertical-align:middle;           }           #middle {                background-color: #E41627;               width:100px;               height:100px;               margin:0 Auto;           }

This method is to convert p to table-cell display, and then through the Vertical-align:middle, and then set its child elements vertically centered, this method and the above set the parent element height fixed when the multi-line text centered method, so this method is not compatible with IE7, IE6. If you need to be compatible with IE7, IE6, you can refer to the above code, set the parent element height fixed when the multi-line text centered method is the innermost p vertical center. I'm not going to repeat it here.

5. Using Display:flex

<!--HTML code--    <p id= "outer" >        <p id= "Middle" >            using Display:flex to implement a sub p size is not fixed vertically centered           </ p>    </P>/*CSS Code *           /#outer {               background-color: #13CDF4;               width:300px;               height:200px;               Display:flex;               justify-content:center;/* Horizontal Center */               Align-items:center;/* Implement Vertical Center */           }           #middle {                Background-color: #E41627;               width:100px;               height:100px;           }

This method only need to add these three sentences in the parent p, but in IE, the compatibility is not good, IE9 and the following versions of IE browser are not supported.

The above is my summary of some commonly used to the vertical center of the design method, you can according to their own needs to choose the right design method.