好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

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

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

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

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

                                             #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%;            }                                                  

查看更多关于Div内容垂直居中_html/css_WEB-ITnose的详细内容...

  阅读:43次