把这些“可以动的盒子”更和谐优雅的展示——②怎样更好的“居中”盒子

本知识学习用时：4小时，总第68/10000小时

前言：让“盒子”居中，在实际工作中可以说是随时都会用到。方法很多，我们在都理解的基础上用起来才能有的放矢、得心应手。

一、水平居中

① 在父元素上设置 text-align: center; 使文字/图片水平居中：

② margin

二、垂直居中

① 居中 vs 不居中

html

css

② 绝对定位实现居中

打开一个页面出现一个弹出框，那这个弹出框在页面垂直居中。这个弹出框可能下边还有东西，那这个弹出框很明显就是绝对定位了。因为，如果他不是绝对定位，他怎么去覆盖其他元素呢！

但由于用户的屏幕有大有小，那我都要让这个弹出框居中，怎样办？

html

css

③ vertical-align 实现居中

html

css

④ table-cell 实现居中

html

css

⑤ display: flex 实现居中

html

css

后记：下一篇我们讲“布局”，其实很多知识我们这连着的几篇文章都涉及到了，下一篇我们就做一个总结，看看我们实际工作中都有哪些常用的“布局”方式。加油！

欢迎继续关注下文 ：

（15）把这些“可以动的盒子”更和谐优雅的展示——③ 实际工作中最常用的“布局”

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）