使用display:flex;实现垂直水平居中

body,div{margin:0px;padding:0px;}
.flex-container{display:flex;height:300px;background-color:#ddd;justify-content:center;align-items:center;}
.item{padding:6px;width:200px;height:200px;}
.item1{background-color:#372;}
.item2{background-color:#484;}

<div class="flex-container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
</div>

justify-content:定义项目在主轴上的对其方

align-items:定义项目在交叉轴上的对齐方式。

 

转载于:https://www.cnblogs.com/snowcan/p/7561093.html