html flex布局水平居中,Flex实现水平竖直居中布局

Flex实现水平竖直居中布局

传统的布局使用的是“盒模型”加上display、position和float属性，但是对于一些特殊的布局实现例如居中却是比较麻烦，所以，为了解决一些复杂的布局问题，一种更为灵活的布局方式出现了，那就是Flex布局。

Flex 即为Flexible Box，指的是“弹性布局”，它可以为盒模型提供更加灵活的布局方式，例如，用flex可以优雅地实现水平竖直居中的布局。

在caniuse上可以查到各浏览器对flexbox的支持程度：

例如下面这个例子，我们想做的是让child元素在parent里面水平竖直居中：

Demo

把parent的display设为flex，使其变成父容器父元素(flex container)，然后把child的margin设为auto，这样child元素就可以在其父元素内水平竖直居中了，完整代码如下：

Demo

body {

padding: 0;

margin: 0;

}

.parent {

display: flex;

height: 400px;

background-color: black;

}

.child {

width: 100px;

height: 100px;

margin: auto;

background-color: white;

}

页面实现的效果让子元素得以在父容器中居中：

相关资源：

Segmentfault 上的文章：Flexbox简介 。

转载请注明出处，欢迎分享