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-head 的height,使show 与offset-head 两者的height一样高。
改动 container 的height 时,需将offset-body 的height 改成container.height - offset-head.height
推荐阅读
-
详解HTML5中垂直上下居中的解决方案
-
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
-
笔记:UITextView内容垂直居中方法
-
多行或者单行文本超出两行显示点点点,如果保证内容始终垂直居中?
-
php正则匹配html中带class的div并选取其中内容的方法
-
HTML连载41-水平居中的注意点、盒子居中和内容居中
-
css3 flex实现div内容水平垂直居中的几种方法
-
python的xpath获取div标签内html内容,实现innerhtml功能的方法
-
POI 单元格垂直居中,相同内容的单元格合并
-
HTML技巧篇:实现元素水平与垂直居中的几种方式