Flex实现水平竖直居中布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flex实现水平竖直居中布局相关的知识，希望对你有一定的参考价值。
传统的布局使用的是“盒模型”加上display、position和float属性，但是对于一些特殊的布局实现例如居中却是比较麻烦，所以，为了解决一些复杂的布局问题，一种更为灵活的布局方式出现了，那就是Flex布局。
Flex 即为Flexible Box，指的是“弹性布局”，它可以为盒模型提供更加灵活的布局方式，例如，用flex可以优雅地实现水平竖直居中的布局。
例如下面这个例子，我们想做的是让child元素在parent里面水平竖直居中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
把parent的display设为flex，使其变成父容器父元素(flex container)，然后把child的margin设为auto，这样child元素就可以在其父元素内水平竖直居中了，完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <style> body { padding: 0; margin: 0; } .parent { display: flex; height: 400px; background-color: black; } .child { width: 100px; height: 100px; margin: auto; background-color: white; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
更多关于Flex的介绍可参见阮一峰的博客：Flex 布局教程。
本文地址：http://www.cnblogs.com/zeakhold/
以上是关于Flex实现水平竖直居中布局的主要内容，如果未能解决你的问题，请参考以下文章