这次给大家带来CSS 垂直水平居中有哪几种方法,CSS 垂直水平居中的注意事项有哪些,下面就是实战案例,一起来看一下。
CSS 居中对齐
代码中均省略了浏览器前缀
以下例子以我的个人的标准排序
当然也有更多的居中处理方法 但我觉得只有这5种方法是最完善的解决方案
flex 居中
优点:可对未知高度进行居中处理
这是第二层的内容 不会居中
position + translate 居中
优点: 可对未知高度进行居中处理、嵌套层最少
这一层的内容 不会居中
table-cell 居中
缺点:1. 居中层需要设置宽度(.center)。 2.外层多嵌套一层(.cell) 3. 居中层必须设置宽度(允许 %)
这一层的内容 不会居中
传统居中 (2种)
缺点:1. margin 值必须为auto。 2. 居中层必须设置高宽(允许 %) 3. 必须使用 position
这一层的内容 不会居中
缺点: 居中层必须设置固定高宽,并且magin需要通过高宽计算得出。
这一层的内容 不会居中
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:










