使用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:定义项目在交叉轴上的对齐方式。

巴特西

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

最新文章

热门文章