Home > Developer > Web Develop
The height of the line whose text is set is equal to the line-height of its parent container. Such as
<style> . test{ Background-Color:grey; line-height:90px; } </style><body> <div class= "Test" > Text Vertical Center </div></body>As follows
Second, the positioning of the box to achieve vertical centering method one: The sub-box absolute positioning after setting its height, margin:auto, and top, right, left, bottom are 0.<style> . container{ width:500px; height:500px; position:relative; Background-color:red; } . Absolute-center{ 50%; 50%; Overflow:auto; Margin:auto; Position:absolute; Top:0; Left:0; Bottom:0; Right:0; Background-color:green; } </style><body><div class= "Container" > <div class= "absolute-center" > Vertical Center </div> </div></body>As follows:
Method Two: Let its sub-box absolute positioning after the top:50%,margin-top:-itself half px height, the level actually set its left and Margin-left<! DOCTYPE html>. container{width:500px; height:500px; position:relative; Background-color:red; }. Absolute-center{width:100px; height:100px; Position:absolute; Top:50%; Margin-top:-50px; Left:50%; Margin-left:-50px; Background-Color:green; } </style>As follows:
If you want it to be centered forever in the viewable area, you need to set it to position:fixed;z-index:999.
Law three: When the height of the element is uncertain, it can be implemented with translate, but IE9 is not supported, the code is as follows:<! DOCTYPE html> . parent{ position:relative; height:300px; Background-Color:grey; } . child{ Position:absolute; Top:50%; Transform:translatey (-50%); Background-color:green; } </style>Three, the non-positioning, non-floating box to achieve vertical centering method one: set its parent element as Table-cell layout, with Vertical-align:middle; To implement, the following code:<! DOCTYPE html> . parent{ display:table-cell; Vertical-align:middle; Background-Color:grey; height:100px; } . child{ Background-color:blue; } </style>If an element that has been positioned or floated still wants to use this method for vertical centering, it needs to be wrapped up with a parent box outside it. To IE7 support, you need to change to the <table> table layout.
Law two: If the child element is a picture, by setting the parent element's row height instead of the height, and setting the parent element's font-size to 0Vertical-align:middle's explanation is that the middle of the element is aligned with the parent element's baseline plus the height of the letter x in the parent element 1/2. Because the character x is not vertically centered in the EM box, the character x of each font is not in the same high and low position. Therefore, when the font size is large, this difference is more obvious. When Font-size is 0 o'clock, it is equivalent to setting the font size of character x to 0 so that it can be completely vertically centered . The following code:
<! DOCTYPE html> . parent{ Line-height:500px; fon-size:0; Background-Color:grey; width:500px; } . child{ Vertical-align:middle; } </style>As follows:
Method Three: The effect of vertical centering is achieved by adding new elementsThe new element sets the height to the parent height, the width is 0, and the Inline-block element is also set vertically centered vertical-align:middle. Because the whitespace between the two elements is resolved, you need to set font-size:0 at the parent, set the font-size to the desired value in the child, and if the structure is not strict, you can display two elements one line, then you do not need to set font-size:0. The code is as follows:
<! DOCTYPE html>. parent{height:100px; Font-size:0; Background-Color:grey; width:200px; }. child{Display:inline-lock; Font-size:20px; Vertical-Align:middle; Background-Color:blue; }. childsbling{Display:inline-lock; Height:100%; Vertical-Align:middle; } </style>As follows:
Four, using the elastic box to achieve vertical centering, but IE9 below is not supported. Law one: Add Display:flex on the parent box;Align-items:center; The following code:<! DOCTYPE html> . parent{ Display:flex; Align-items:center; Background-Color:grey; height:200px; } </style>The effect is as follows:
Law two: Add Margin:auto 0 on the sub-box, the code is as follows:<! DOCTYPE html> . parent{ Display:flex; Background-Color:grey; height:200px; } . child{ 0; } </style>The effect is as follows:
CSS Vertical Centering
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
