让元素水平居中的方法有哪些？

方法一：使用 margin

通过为元素设置左右的 margin 为 auto，实现让元素居中。

<div class="center">本内容会居中</div>

.center {
   height: 500px;
   width: 500px;
   background-color: pink;
   margin: 0 auto;
}

方式二: 转成行内块, 给父盒子设置 text-align: center

<div class="father">
	<div class="center">我是内容盒子</div>
</div>

.father {
  text-align: center;
}
.center {
  width: 400px;
  height: 400px;
  background-color: pink;
  display: inline-block;
}

方法三：使用 flex 布局

使用 flex 提供的子元素居中排列功能，对元素进行居中。

<div class="father">
	<div class="center">我是内容盒子</div>
</div>

.father {
  display: flex;
  background-color: skyblue;
  justify-content: center;
  align-items: center;
}
.center {
  width: 400px;
  height: 400px;
  background-color: pink;
}

方式四: 使用定位布局
子绝父相
top:50%
left:50%
transform:translate(-50%,-50%)

<div class="father">
  <div class="center">我是内容盒子</div>
</div>

.father {
  background-color: skyblue;
  position: relative;
  height: 500px;
}
.center {
  width: 400px;
  height: 400px;
  background-color: pink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}