使用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:定義項目在交叉軸上的對齊方式。