欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-26 22:03:03
...
感觉 CSS 有很多可以hack 的,好玩的地方。

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

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

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

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



    




效果图:


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

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

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