Reprint: Interpretation of CSS layout-Horizontal vertical Center (2)

Three. Absolute horizontal vertical center under Layout context

50% +-50%

The principle is very simple, is to use left:50% to the left of the box to the center of the parent container, and then the box to the left offset box width of 50%, there are three specific implementations:

<div class="Wrap"><div class="Ele margin"> Horizontal Vertical Center Horizontal vertical<br> Center Horizontal Vertical Center Horizontal<br> Vertical Center Horizontal vertical<brHorizontal Vertical Center in ></div></div><div class="Wrap"><div class="Ele translate"> Horizontal Vertical Center Horizontal vertical<br> Center Horizontal Vertical Center Horizontal<br> Vertical Center Horizontal vertical<brHorizontal Vertical Center in ></div></div><div class="Wrap"><div Class= "ele relative "> <div Class= "Ele-inner" > Horizontal vertical Center Horizontal vertical <br< Span class= "token operator" >> Center horizontal vertical Center horizontal <br> Vertical Center Horizontal vertical <br> horizontally vertically centered </div> </div> </div>   

. Wrap{Position: Relative; Width:100%; Height: 200px; Border: 1px solid; Background-color: #ccc;. ele{Position: Absolute; Left:50%; Top:50%; Background-color: #333;&. margin{width: 160px; Height: 100px; Margin-left:-80px; Margin-top:-50px;}&. Translate{-webkit-transform:Translate3d(-50%,-50%,0); Transform:Translate3d(-50%,-50%,0);}. ele-inner{Position: Relative; Left:-50%; Top:-50%; Width:100%100%-color333} &.relative{width: 100px-color} }}    /span>                

Of the above three methods, both the margin method and the relative method need to know the width well paid line of the element (the relative method only knows the height of the line), for the fixed layout, and the transform method can not know the element width is high

Text-align:center + Absolute

Text-aign:center is not intended to directly act on the absolute element, but the row-level absolute element that does not give its left equivalent is affected by the text.

Code:

<div class="wrap">    <div class="ele"></div></div> 

. Wrap{text-align: Center; Width:100%; Height: 400px; Background-color: #ccc; Font-size:0;}. ele{Position: Absolute; Margin-left:-(100px/2) -top:  (400px -100px) /2< Span class= "token punctuation"; Width : Inline-block-color: #333             /span>          

In a nutshell, first, Text-align:center is the text rather than the absolute element, but when the absolute element is inline-block, it will be affected by the text, and then you may ask that there is no text here. I can only tell you that this is the following, is an anonymous text node. Specific here does not unfold, can refer to the standard, and then understand this sentence:

If The inline box contains no glyphs at all, it's considered to contain a strut (an invisible glyph of zero width) with T He A and D of the element ' s first available font

Then this anonymous text due to Text-align:center affected by the center, this time the left side of the absolute box is aligned with the parent container's midpoint, so you also need to pull back 50%, here is Margin-left, you can also pull in other ways. Then there is the vertical alignment, the vertical direction is not affected by the manipulation of the text properties, so I use the margin-top to let it drift down.

Absolute + Margin:auto

Code:

<div class="wrap">    <div class="ele"></div></div> 

Html, body{width:100%; Height:100%; Margin:0;}. Wrap{Position: Relative; Width:100%; Height:100%; Background-color: #ccc;. ele{Position: Absolute; Left:0: 0: 0: 0: Auto; Width -color333}        

Reprint: Interpretation of CSS layout-Horizontal vertical Center (2)