css div水平垂直居中

第一种：

使用table布局（不推荐）

<div class="vc">
    <div class="vci">
      <div class="content">
        我们垂直居中了，我们水平居中了
      </div>
    </div>
</div>

<style>
.vc{
  position: fixed;
  display: table;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .vci{
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    .content{
      color: #333;
      border: 1px solid red;
      display: inline-block;
      padding: 30px;
    }
  }
}
</style>

第二种

<div class="vc">
    <div class="vci">
      我们垂直居中了，我们水平居中了
    </div>
</div>
<style>
.vc{
  height: 100%;
  text-align:center;
  font-size:0;
  .vci{
    vertical-align:middle;
    display:inline-block;
    font-size:16px;
  }
  &::after{
    content:'';
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
  }
}
</style>

第三种

<div class="vc">
    <div class="vci">
      我们垂直居中了，我们水平居中了
    </div>
</div>
<style>
.vc{
  height: 100%;
  display: flex;
  text-align: center;
  .vci{
    margin: auto;
  }
}
</style>

第四种（未知元素宽度）

使用定位

<div class="vc">
    <div class="vci">
      我们垂直居中了，我们水平居中了
    </div>
</div>
<style>
.vc{
  background-color: #FF8C00;
  width: 300px;
  height: 300px;
  position: relative;
  .vci{
    background-color: #F00;
    position: absolute;
    max-width: 120px;
    max-height: 120px;
    overflow: hidden;
    overflow-y: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 30px;
  }
}
</style>

第五种

flex布局

<div class="vc">
    <div class="vci">
      我们垂直居中了，我们水平居中了
    </div>
</div>
<style>
.vc{
  background-color: #FF8C00;
  width: 300px;
  height: 300px;
  display: flex;//flex布局
  justify-content: center;//使子项目水平居中
  align-items: center;//使子项目垂直居中
  .vci{
    background-color: #F00;
    width: 100px;
    min-height: 100px;
    padding: 10px;
  }
}
</style>