div在页面中水平，上下居中的两种方法，flex和margin

第一种：flex

html

<div class="flex-box">
    <div class="item-box">111</div>
    <div class="item-box">222</div>
    <div class="item-box">333</div>
</div>

css

.flex-box{
  display: flex;
  align-items:center; /*垂直居中*/
  justify-content: center; /*水平居中*/
  width:100%;
  height:100%;
}

 

第二种： margin

html

<div class="flex-box">
    <div class="item-box">111</div>
    <div class="item-box">222</div>
    <div class="item-box">333</div>
</div>

css

.flex-login{
  width: 310px;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}