块级元素垂直居中（Flex布局方法）：

css部分：
 *{padding: 0;margin: 0;}
body,html,.wrap{width: 100%;height: 100%;}
.wrap{background: yellow;display: flex;-webkit-display: flex;align-items: center;-webkit-align-items: center; justify-content:center;-webkit- justify-content:center;}
.box{width: 100px;height: 100px;background: green;}

html部分：

<div class="wrap">
    <div class="box"></div>
</div>

效果图如下：

心得：

父元素宽高不定，设置width: 100%;height: 100%，

变为弹性盒子display: flex;-webkit-display: flex，

设置水平居中justify-content:center;-webkit- justify-content:center;

设置垂直居中align-items: center;-webkit-align-items: center;

子元素设置样式width: 100px;height: 100px;background: green;

希望能帮到小伙伴们哈~

最后

以上就是迅速香烟为你收集整理的用Flex布局实现块级元素垂直居中块级元素垂直居中（Flex布局方法）：的全部内容，希望文章能够帮你解决用Flex布局实现块级元素垂直居中块级元素垂直居中（Flex布局方法）：所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。