水平垂直居中对齐方法

1. 对于行内元素，text-align: center实现水平对齐，height === line-height实现垂直对齐

.container{
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
}

<div class="container container-1">
  <span class="item item-1">水平垂直居中</span>
</div>

1. 对于块级元素有4种对齐方式

2. 父级元素relative，自身absolute

.container{
  width: 100%;
  height: 200px;
  position: relative;
}
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="item">水平垂直居中</div>
</div>

• absolute加margin: auto法，前提是必须设置固定高度

.container{
  width: 100%;
  height: 200px;
  position: relative;
}
.item{
  position: absolute;
  height: 24px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}

<div class="container">
  <div class="item">水平垂直居中</div>
</div>

• absolute加margin负值法，前提必须知道元素的宽高

.container{
  width: 100%;
  height: 200px;
  position: relative;
}
.item{
  position: absolute;
  height: 24px;
  width: 110px;
  top: 50%;
  left: 50%;
  margin-left: -55px;
  margin-top: -12px;
}

<div class="container">
  <div class="item">水平垂直居中</div>
</div>

• flex法

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="item">水平垂直居中</div>
</div>