html flex布局水平居中,CSS3 Flexbox轻松实现元素的水平居中和垂直居中

网上有不少关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，遇上新技术，下面我就把这种布局叫Flex布局。css

元素居中，相信做为前端工程师的你确定会常常用到，无论是在水平方向居中，仍是垂直方向居中，均可在你的职业生涯中徘徊。不过不少时候要实现垂直居中，仍是比较麻烦的。不过你也不用担忧，下面就给你们分享下经过Flex布局轻松实现元素在水平、垂直方向上的居中效果。html

水平居中

水平居中最为简单咱们直接来看下代码前端

1.单个元素水平居中css3

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

CSS代码

.box{

display: flex;

justify-content: center;

background: #0099cc

}

h1{

color: #FFF

}

HTML代码

flex弹性布局justify-content属性实现元素水平居中

在这段代码里咱们只须要给h1标签的父元素添加两个属性就能够了，justify-content其做用就是 让class类为box的div盒子居中。盒 子居中了，盒子里面的元素就天然居中了，他的好处就是不须要对需居中的元素(h1)设置任何样式，若是：width，margin。前端工程师

2.多个h1元素水平居中布局

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

HTML代码