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

This article has been transferred from http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/, as well as the Earth Dudy Blog/http/ Www.cnblogs.com/Dudy/p/4085292.html.

The horizontal vertical center of an element, in our work is often encountered, but also a very important part of the CSS layout, this article is about CSS horizontal vertical center of some methods. Because of our daily work in the big search car no longer need to ignore the low version of IE, so the method is posted in this article, is not to consider IE, if there is compatibility needs, can see this article: http://www.cnblogs.com/Dudy/p/4085292.html.

The CSS layout can be divided into several chunks:

• Layout inside the box
  • Layout of text
  • The layout of the box model itself
• The layout between the boxes visual formatting
  • The layout of a box that is out of normal flow
    • Absolute layout under Layout context
    • Layout under the Float layout context
  • The layout of the box under normal flow
    • BFC layout under Layout context
    • Layout under IFC layout context
    • Layout under the FFC layout context
    • Layout under Table layout context
    • Layout under CSS Grid layout context

All CSS layouts are actually centered around these layout modules, and the horizontal vertical center is the same.

I. Horizontal vertical centering of text

Line-height + text-align:center

Code:

<div class=‘wrap‘>    水平垂直居中水平垂直居中</div> 

Html, body{margin: 0;} . Wrap{line-height: 400px; text-align: center; height: 400px; font- Size: 36px; background-color: #ccc;}         

This method is only suitable for horizontal vertical centering of single-line text.

Two. Horizontal vertical centering with box model

We generally talk about the box model is said block-level box box model, but also only block-level box box model with a little more, block-level box Block-level box is composed of Content-box, Padding-box, Border-box, Margin-box, It's also said that the spacing between the horizontal and vertical sides of any of my sub-boxes and the outermost box is controllable, so there is the following centering method:

padding fill

Code:

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

@wrapWidth: 400px;. Wrap{margin-left: Auto; Margin-right: Auto; Margin-top: 20px; Width: @wrapWidth; Height: @wrapWidth; Background-color: #ccc;}. Content{@contentWidth: @ Contentwidth: @contentWidth ; Padding-@contentWidth / Span class= "token number" >2-color333-clip:content-box;              /span>         


You can also use the CSS3 Calc () to calculate dynamically:

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

. Wrap{margin-top: 20px; Margin-left: Auto; Margin-right: Auto; Width: 400px; Height: 400px; Background-color: #ccc;. Content{padding:-webkit-Calc(~"(100%-100px)/2": Span class= "token function" >calc (~" (100%-100px)/2 ": 100px: 100px-color: #333< Span class= "token punctuation"; Background-clip: Content -box; }}        /span>               

Note that here I used a ~ "" in Calc, this is the syntax of less, tell the not to be compiled here, if not compiled, CSS calc function parameter is not 100%-100px, but 0%.

Margin fill

Code:

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

. Wrap{@wrapHeight: 400px; @contenHeight: 100px; Overflow: Hidden; Width:100%; Height: @wrapHeight; Background-color: #ccc;. ele{margin-left: Auto; Margin-right-top< Span class= "token punctuation" >:  (@wrapHeight -@ Contenheight/2-color: #333: #fff }}        /span>              

Using margin padding we need to know the width of the element, which is not very flexible, but CSS3 has a fit-content attribute value that dynamically calculates the width of the element.

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