Div content vertically centered_html/css_WEB-ITnose-HTML Tutorial-php.cn

Div content vertically centered_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:08

Original

883 people have browsed it

I feel that CSS has a lot of fun places to hack.

thought of a simple and weird way to vertically center the content you want to display in Div.

Instead of using flexbox, JS, Less, Scss, rotate, before, after.

You can insert a div with the same size as the "content area" in the head of container, and then set the bottom is 50% of the father.

After final calculation, you will find that the upper and lower distances of the "content area" are equal.

<html>    <head>            <style type="text/css">                          #container {                        position: relative;                left: 200px;                top: 100px;                width: 100px;                height: 400px;                background-color: #7873fa;            }                        #offset-head {                            height: 50px;                   }                        #offset-body {                width: 100px;                height: 350px;                     position: relative;            }                   #show {                width: 100px;                height: 50px;                background-color: #ffbc3e;                position: absolute;                bottom: 50%;            }                    </style>              </head>    <body>         <div id="container">                   <div id="offset-head"></div>            <div id="offset-body">                <div id="show"></div>                        </div>        </div>             </body></html>

Copy after login

Rendering:

But when the code is changed, for example:

Change the yellow (

show) to a higher level , you need to adjust the height of offset-head so that the height of both show and offset-head Same height.

When changing the

height of container, you need to change the height of offset-body to container. height - offset-head.height