我虽然 30 多岁, 但感觉进行 web 开发工作有几个世纪了. 你不知道, CSS 中的布局管理简直就是一场噩梦, 有时候看似很简单的任务, 却因为种种原因让你的布局无法漂亮起来. 很多这样的时候, 我都把 flexbox 模式当成我的救星. 虽然这种模式以后也许可能还会有变化, 但目前它至少解决了一个 CSS 里长久以来存在的问题: CSS 竖向居中对齐. 下面我将向你展示使用 flexbox 模式是如何的容易实现它:
观看演示
竖向居中需要一个父元素和一个子元素合作完成.
- <div class="flexbox-container">
- <div>Blah blah</div>
- <div>Blah blah blah blah blah ...</div>
- </div>
... 但为了让子元素竖向居中, 你只需要对父元素施加 CSS 样式:
- .flexbox-container {
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -ms-flex-align: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- align-items: center;
- }
因为上面使用了浏览器引擎前缀, 所以看起来有些复杂, 但实际上本质是非常简单的, 也就 2 句代码. 关于 CSS 竖向居中之前也说过几种方法, 但使用 flexbox 也不失为一个非常漂亮的解决方案. 我相信以后会发现 Flexbox 更多更有价值的用法.
来源: http://www.webhek.com/post/css-vertical-center-with-flexbox.html