Summary of vertical and horizontal centering methods

Center inline elements horizontally

Text-align:center;

Block element

1. The fixed width block element is centered horizontally

margin:0 auto;

2. Horizontal center of variable width block element

method One : Use floating inclusion and percent relative positioning

<div class=‘outer‘>   <div class=‘inner‘></div></div>

We want to center the inner (indefinite width) horizontally on the outer, so we can do this:
First, add a layer of div outside the inner:

<div class=‘outer‘>   <div class=‘wrap‘>      <div class=‘inner‘></div>   </div></div>

At first the box was like this:

CSS writes like this:

.wrap{   float:left;   position:relative;   left:50%;}.inner{   position:relative;  //为啥用absolute没用啊   left:-50%;}

The reason wrap is set to float is to form a package, wrap the inner, and the width and height of the floating element wrap are inner open with internal elements and no longer occupy the entire line. That is to say, the width of wrap and inner is equal.

Position:relative set percent means a percentage of the width of the parent element. At this point, the left edge of wrap is half outer.width from the left edge of outer, meaning that the left edge of wrap is on the middle of the outer.

But we want the midline of the inner and the middle line of the outer to overlap, then we need to inner to the left half of its own width, but its own width does not know Ah, this is why you need to add a layer of wrap and wrap to float (package), according to the " Relative set percentage meaning is relative to the percentage of the parent element width "this rule. Since wrap's width and inner are equal, 50% is 50% of the width of the inner.

This method also has drawbacks, because wrap floats and should clear the float.

method Two : Place the element that will be centered in a TD label on the table
The reason is that the table is not a block element, it does not fill the entire row, its width is stretched by the content, and you can set the table's

marginauto;`

Can.
The disadvantage is that there is no semantic tag added.

method Three changes the block element property to inline
This allows the parent element to use Text-align:center to center the inner element

Center line text vertically

Sets the parent element's height and line-height equal.

Parent element Height-determined multiline text, picture, block element

method One:
Place the element that will be centered vertically in the TD of the table, and then set the TD:

verticle-align:middle;

In fact, this is the default. The verticle-align is only available on the inline, inline-block level, and table-cells elements.

Method Two:
In Chrome, Firefox and IE8 above the browser can be set block-level element display for Table-cell, activating vertical-align properties, but note IE6, 7 does not support this style. Can not table-row this layer, the direct outer table, the inner layer Table-cell can achieve the content of the inner element vertically centered. For example, the following Tocenter want to center vertically in box, you need to set box to Table-cell so you can activate its vertical-align:

<divclass="box">  <divclass="toCenter">       我想要在父元素中垂直居中显示  </div></div>.box{display: table-cell;width:200px;height:200middle;}.toCenter{width:100px;height:100px;background: purple;}

Cons: IE6 and IE7 do not support Display:table-cell.

method Three: Determine the height of the element to be centered
1. Using positioning

<divclass="outer">   <divclass="inner"></div></div>

The CSS code is:

. Outer{  background:#FFCCCC;     Border:1px solid #000;   position:relative; }. Inner{width :     100  px  ; height :   px  ; background :  #CCFF66   ; position : absolute     ; top :  %  ; //parent element height of half margin-top : -<  Span class= "Hljs-number" >50  px  ; //up to half of its height}  

Why is the vertical center not the same as the horizontal center method?

.inner{    position:relative;     top:-50%;}

No use???

2. Add a floating block before you want to center the element, and then set the Margin-bottom of the Block

<Divclass="box"> <Divclass="Floater"></Div> <Divclass="Tocenter"> I want to center the display vertically in the parent element </Div></Div>.box{width: -Px;height: -px;}. Tocenter{width: -Px;height: -Px;position:relative;Clear: both}//Clear float. Floater{height: -%;float:left;margin-bottom:- -Px}//Bottom margin-to center half of the height of the element

padding the upper and lower values of the four parent elements are set to the same
When the height of the parent element is not set, the upper and lower padding value of the parent element is set to the same extent that the inner block element appears centered vertically.

Method Five

. Box{position:relative;} . Tocenter{ position:Absolute ; top:0 ; Bottom:0 ;Left  :0 ;Right  :0 ; margin:auto ; height:px ; width:% ;}

method Six using the Box property
Parent element Settings:

display:box;box-align:center;  //将剩余空间均分到子元素上下两侧

Resources:
Several methods of horizontal center of unknown width
5 ways to vertically center CSS

Data to see: 6 Ways to vertically center CSS elements

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Summary of vertical and horizontal centering methods