Vertical center analysis with fixed width and height and vertical center Analysis

Vertical center analysis with fixed width and height and vertical center Analysis

Yesterday I made a mobile project. In this case, the image container scales freely with the width of the view, the image width is not fixed, the height is vertical, and the center is:

When we made this layout,I always thought of using display: table-cell to center through vertical-align: middle. When I use position: absolute on the same node, this center problem will become invalid.

The solution is as follows:

<! Doctype html> 
　　
The following describes three vertical center solutions:
I have chewed some previous knowledge points:
1. Horizontally centered knowledge point
text-align:center
There may not be much introduction to horizontal center. All mainstream browsers support the text-align attribute. You only need to set the value to center;
2. vertical-align knowledge point
Vertical-align applies to inline level, inline-block level, and table-cells elements.
All mainstream browsers support the vertical-align attribute, so using this attribute to implement vertical center is a good idea;
　　I. demo of vertical center using display: table-cell; vertical-align: middle;
<Div id = "demo"> <p> free content of horizontal and vertical center </p> </div> # demo {display: table; width: 500px; margin: 10px auto; background: # eee;} # demo p {display: table-cell; height: 100px; vertical-align: middle ;}
Since the table can be implemented, we will naturally think of setting the display to the value of the table. Of course, this solution has limitations, because IE8 or lower browsers do not support the value of the display table, so you can only see the effect in IE8 or later browsers and non-ie browsers;
IIUse display: table-cell; vertical-align: middle; to perform an indefinite height, vertical center DEMO
<Div id = "demo"> <p> free content of horizontal and vertical center </p> </div> # demo {height: 100px; text-align: center ;} # demo: after {display: inline-block; width: 0; height: 100%; vertical-align: middle; content: '';}# demo p {display: inline-block; vertical-align: middle ;}
NOTE: With reference to the above Code, if the width of the content container p is 100%, it will lead to # demo: after being squeezed out in a row, this is caused by inline element spacing. You can set font: 0 to eliminate it. To maintain full compatibility, you can use span labels instead of pseudo classes.
Perfect solution: demo
<Div id = "demo"> <p> This is the ultimate horizontal and vertical center instance </p> <! -- [If lt IE 8]> <span> </span> <! [Endif] --> </div> # demo {height: 100px; text-align: center; font-size: 0; // note that the text interval is removed here, place a line break when the content width is 100%} # demo: after, # demo span {display: inline-block; * display: inline; * zoom: 1; width: 0; height: 100%; vertical-align: middle;} # demo: after {content: '';} # demo p {display: inline-block; * display: inline; * zoom: 1; vertical-align: middle; font-size: 16px ;}
3.And use translate3d (-50%,-50%, 0) to achieve vertical center. Only the later version is supported.
<Style type = "text/css">. main {width: 600px; height: 600px; position: relative }. box {position: absolute; top: 50%; left: 50%;-webkit-transform-origin: 50% 50%;-webkit-transform: translate3d (-50%,-50%, 0 )} // The principle is somewhat similar to top: 50%; left: 50%; margin:-height/2 0 0-width/2. In this case, you must know the height, but this does not need </style> <div class = "main"> <div class = "box"> 555666 </div>
　　4. Use two-level nesting, left and top twice to center
<style type="text/css">html,body{width: 100%; height: 100%; margin: 0; padding: 0;}.wrp{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.5);}.box{position: absolute; left: 50%; top: 50%;}.box2{position: relative; left: -50%; top: -50%; background-color: #f60000; color: #fff; padding: 10px;}</style> <div class="wrp"><div class="box"><div class="box2">sssssfdsfd</div></div></div>
Use two divs with an unspecified width to embed them. Locate the peripheral div with absolute, left: 50%, top: 50%. In this way, the upper left corner of the peripheral div is in the horizontal vertical center state. The internal div uses relative to locate, so that the peripheral div can be opened with its own width and height, and left:-50%, top:-50%; (use margin-left, margin-top can also be used, that is, the internal div's geometric center is overlapped with the upper left corner of the peripheral div by referring to the principle of the width and height of the peripheral div. In this way, the vertical horizontal drama is realized. This principle is a bit like using translate (-50%,-50%) to implement horizontal and vertical center. However, I use the css1.0 code, so it is compatible with IE6.0 ~ IE11 chrome and firefox
 
Reference:
Unknown Dimension Element horizontal vertical residence http://demo.doyoe.com/css/alignment/