CSS vertical centering method_html/css_WEB-ITnose

During front-end development, horizontal and vertical centering is more commonly used. Let’s get straight to the point and look at the advantages and disadvantages of different methods to achieve vertical centering.

1. Set "line-height" and "height" to be consistent

This method is quite simple and quite useful to achieve vertical centering of a single line. Commonly used. You only need to ensure that the element content is a single line and its height is fixed. You only need to set its "line-height" to the same value as the "height" and it will be OK. However, this method is too limited. It is only applicable to single-line text elements, so this method cannot be used on multi-line elements.

<div class="vertical">content</div>.vertical { height: 100px; line-height: 100px;/*值等于元素高度的值*/ }

Advantages:
Suitable for all browsers, the content will not be cut off when there is not enough space.

Disadvantages:
is only suitable for application on text and pictures, and this method, when your text is not a single line, the effect is extremely poor, so bad that it will make you feel sick.
This method is very useful for small elements, such as a button, image or single line text field.

2. Set the absolute positioning of the container, based on the values ​​​​of top and margin-top

This method will set absolute positioning for the container (position:absolute) ), and the positioning height (top:50%) and margin-top are half of the height (margin-top:-height/2). This means that to achieve vertical centering using this method, the element must have a fixed height. In this way, you set a fixed height for the element. If you set "overflow:auto" for it, then when the element content exceeds the container, the element will scroll and will not adapt to the height of the content.

<div class="vertical">content</div>.vertical { height: 100px;/*元素的高度*/ position: absolute; top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/ margin-top: -50px;/*设置元素顶边负边距，大小为元素高度的一半*/ }

Advantages:
Can work under various browsers, the structure is simple and clear, no need to add additional tags

Disadvantages:
Due to The height of the dead element is fixed so that there is not enough space. When the content exceeds the size of the container, it will either disappear or a scroll bar will appear (if the element is within the body, when the user shrinks the browser window, the body's scroll bar will not will appear).

3. Set the display to "table" and "table-cell" to realize the div used by

to simulate the table effect, that is to say, multiple

<div id="container">    <div id="content">this is content</div></div>#container { height: 300px; display: table;/*让元素以表格形式渲染*/ } #content { display:table-cell;/*让元素以表格的单元素格形式渲染*/ vertical-align: middle;/*使用元素的垂直对齐*/ } 

Advantages:
This method does not have height restrictions like the previous two methods. This method can be based on elements. The content changes height dynamically, so there is no space limit. The content of the element will not be cut off or ugly scroll bars will appear due to insufficient space.

Disadvantages:
What are the shortcomings? This method is only suitable for modern browsers and cannot run properly under IE6-7; and the structure is more complex than the first two.
This method is very convenient under modern browsers. However, it is not supported in IE6-7 because display:table is not supported in IE6-7. In order to solve the problem of compatibility of this method in IE6-7, you need to add an additional div and use a hack. The solution is way.

<div class="table"> 　　<div class="tableCell"> 　　　　<div class="content">content</div> 　　</div> </div>.table { height: 300px;/*高度值不能少*/ width: 300px;/*宽度值不能少*/ display: table; position: relative; float:left; } .tableCell { display: table-cell; vertical-align: middle; text-align: center; padding: 10px; *position: absolute; *top: 50%; *left: 50%; } .content { *position:relative; *top: -50%; *left: -50%; } 

4. Use display:inline-block, and then use the height of another element to achieve centering

This method It uses display:inline-block, and then uses the height of another element to achieve centering

<div id="parent"> 　　<div id="vertically_center"> 　　　　<p>I am vertically centered!</p> 　　</div> 　　<div id="extra"><!-- ie comment --></div> </div> <style type="text/css"> html, body{ height: 100%; } #parent { height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/ border: 1px solid red; } #vertically_center, #extra { display: inline-block;/*把元素转为行内块显示*/ vertical-align: middle;/*垂直居中*/ } #extra { height: 100%; /*设置线盒型为父元素的100%高度*/ } </style> <!--[if lt IE 8]> <style type="text/css"> /*IE6-7不支持display:inline-block，所以在ie6-7另外写一个hack，用来支持ie6-7*/ #vertically_center, #extra { display: inline; zoom: 1; } #extra { width: 1px; } </style> <![endif]-->

Advantages:
can adapt to height, simple and easy to understand

Disadvantages:
You need to set a height for the parent element of the element. This height can be a fixed value or a percentage height. In addition, you need to add an additional tag as a line box type, such as div#extra, And need to set its height to 100%. In addition, ie6-7 does not support display:inline-block, so you need to write another style for them.

5. Give the same padding value for the top and bottom

This method is for centering multi-line content, and the height of the container is variable. The method is very simple, just give Output the same padding value as the top and bottom.

<div class="columns">     <div class="item">test</div> </div>.item {padding-top:30px;padding-bottom:30px;} 

Advantages:
Works normally in all browsers, supports all elements, simple and easy to understand, clear structure

Disadvantages:
The height of the container cannot be fixed using this method. If the height is fixed, the effect will not be achieved.

6. Parent container settings display: flex; All can be centered and suitable for mobile devices.

Disadvantages:

Many browsers are not compatible. Only the latest version of IE is supported, other browsers need to be prefixed.

<div class="columns">    <div class="item">content</div></div>.columns{display: flex;-moz-box-pack: center;justify-content: center;-moz-box-align: center;align-items: center;height: 400px;width: 400px;}