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

**方法一：使用 margin**

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

html

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

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

html

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

**方法三：使用 flex 布局**

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

html

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

**方式四: 使用定位布局**

html

css
.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%);
}