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

Four. Horizontal vertical centering under float layout context

float +-50%

Demo Link

Code:

<div class="Wrap"><div class="Ele"> <div class="Ele-inner"> Center Center Centered Center Center Center <br > Center Centered Center Centered Center Center Center Center <BR > Center Centered Center Center centered Center Middle center Centered <br > Center Center Centered Center Center Center   </div  > </div></div>        

. Wrap{Float: Left; Width:100%; Height: 400px; Background-color: #ccc;. ele{Float: Left; Position: Relative; Left:50%; Top:50%;}. ele-inner{Position: Relative; Left:-50%;-webkit-transform:Translate3d(0,-50%0) ; Transform translate3d  (0-50% Span class= "token number" >0-color: #333; Color: #fff }}        /span>                

The principle of this method, first of all, is to use the Float property to be the parent element of the element that will need to be centered. The width of the ele shrinks, and then left:50% aligns the left side of the. Ele with the horizontal midline, which is not centered at this time and needs to pull it back to its width of 50%. So. Ele-inner is really the element that needs to be centered horizontally, I give it a position:relative, pull it back to the width of 50% on the line. For the vertical direction, the. Ele is still top:50% to the midpoint in the vertical direction, but at this point the. Ele-inner top:50% is not working, because if the parent element is not explicitly high, the 50% is not calculated, so there is the transform: Translate3d (0,-50%, 0).

The advantage of this method is that the element can be wide and can be centered at any time.

I found this method at the W3cplus station at that time, I thought this method is very good, the compatibility is good, but also can be indefinite wide, but when I spent a period of time, found a problem:

is when the parent element of the center element left:50%, if the element width is large enough, will exceed the outside of the container, and if the outside of the container is exactly overflow:auto, it will be outside the scroll bar, the problem demo link here, and then I found a way: Demo link, The basic idea is that the use of elements beyond the left side of the parent element will not produce a scrollbar, a bit of kinky skill, but can solve the problem, interested can see

Margin-bottom:-50%

Demo Link

Code:

<div class="wrap">    <div class="placeholder"></div> <div class=‘content‘></div></div> 

. Wrap{Float: Left; Width:100%; Height: 400px; Background-color: #ccc; @contentHeight: 100px;. placeholder{Float: Left; Width:100%; Height:50%;/* Center element. Content Height Half */margin-bottom:-(@contentHeight/2);}. Content{Position: Relative; Left:50%; Transform:Translate3d(-50% , 00: Both; /* demo, actually do not need a fixed width */max-width : @contentHeight -color333; }}        /span>               

The method is to let the placeholder element first. placeholder occupies 50% height and then gives a negative margin-bottom with a center element height of half, then the following elements can be vertically centered as long as they are placed. The horizontal direction is to use the translate to do offset, this nothing to say, you can also change to other methods.

This method is a variety of fixed dead, first the outermost parent container needs a fixed height, so that the. Placeholder height:50% effective, and then, Margin-bottom also need to be fixed dead, and need to know the center element height. Purely in terms of horizontal orientation, this method is more suitable for projects that require a fixed layout that is compatible with low-version ie, because of its compatibility.

Five. BFC Horizontal Vertical Center under Layout context

BFC is the full name of the block-level typesetting context, here is a simple introduction to the article, BFC layout context of the layout is actually using the box model itself layout, the front in the box model layout of that section has been said, here does not repeat

Six. Horizontal vertical centering under IFC layout context

What is IFC's concept, you can look at the official documentation, or simply understand the layout of the row-level elements that display is inline.

Text-align:center + Vertical-align:middle

Demo Link

Code:

<div class=> <div class< Span class= "token operator" >= ' placeholder ' ><! --placeholder element, used as a reference for centering elements --> </div> <div Class= "Ele" ></div></div >             

. Wrap{width:100%; Height: 400px;/* min-height:400px; */Text-align: Center; Font-size:0; Background-color: #ccc;. placeholder,. ele{Vertical-align: Middle; Display: inline-block;}. placeholder{Overflow: Hidden0-height: Inherit : Inherit  .ele{width< Span class= "token punctuation": 100px: 100px-color 333}}         

Row-level elements will be affected by text-align and Vertical-align, about vertical-align, not well understood, I post several articles: @ inspiration idea, Zhang Xin Asahi, MDN, Css-trick, and official documents, Here the first is to use Text-center to let Inline-block horizontal center, and then give a vertical-align:middle, but only to Vertical-align:middle is not enough, Because at this time it has not vertical-align alignment of the reference, so gave a placeholder for the Inline-block, its height is 100%.

This method does not need a fixed width height for the centering element, and the element can not only be centered according to the vertical-align value, but also can be placed below it. The disadvantage is that the parent element needs to be set high

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