Heim >Web-Frontend >HTML-Tutorial >Div 内容垂直居中_html/css_WEB-ITnose

Div 内容垂直居中_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:08907Durchsuche


感觉 CSS 有很多可以hack 的,好玩的地方。

想了一个简单的,诡异的办法,让Div 中想展现的内容垂直居中。

而不去使用 flexbox, JS, Less, Scss, rotate, before, after。

可以在 container 头部塞一个与“内容区域”一样大小的 div,然后设置“内容区域”的 bottom 为父亲的 50%,

最后计算下,会发现“内容区域”上下距离相等。



                <style>                          #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>                           <div>                   <div></div>            <div>                <div></div>                        </div>        </div>             




效果图:


不过代码发生改动的时候,比如:

将黄色 (show ) 变高时,需调整offset-headheight,使showoffset-head 两者的height一样高。

改动 containerheight 时,需将offset-bodyheight 改成container.height - offset-head.height


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn