在上文《你不知道的CSS（一）》中，介绍了兄弟选择器美化表单，font-size:0消除间隙，overflow清除浮动，border绘制三角形等7个实用技巧。由于文章长度限制，还遗留了一些技巧没有介绍，考虑到日后可能会有更多的技巧需要补充进来，便将上文改名为你不知道的CSS（一），名字其实有点浮夸，希望能完善为一个系列，也希望该系列中介绍的技巧能够帮助到更多人解决实际开发中遇到的问题。在这里感谢SegmentFault的小编在微博上的推荐。本文将重点介绍CSS中未知高度容器的垂直居中技巧。同样每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得）。
未知高度容器的多种垂直居中方法
在已知父子高度的情况下，实现垂直居中是很容易的事。margin ， padding，absolute + 负margin , 甚至于 line-height都是可行的方案。这里不再展开，文章主要来介绍在父容器高度固定，子容器高度自适应的情况下，来实现其垂直居中于父级盒子的几种方案。为了使案例更真实，我们来模拟一个垂直居中于页面中的弹出层(modal)。
先运行下Demo 过过瘾
时间： 2024-10-27 05:55:17