水平居中
- 行内元素
给父元素设置text-align:center。
若父元素不是块元素，则给父元素设置display:block即可
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
text-align: center;
}
.son {
background-color: red;
}
</style>
<div class='father'>
<span class="son">
sssssss
</span>
</div>
效果图：
-
块元素
1、设置margin:0 auto让其行方向自适应分布。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
效果图：
2、给父元素设置相对定位，子元素设置绝对定位，通过left:50%将子元素的左上角水平居中，然后通过margin-left:-50px（该值为子元素宽度的一半）将其整体水平居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
3、同第二条，先给父元素设置相对定位，子元素设置绝对定位，通过left:50%将子元素的左上角水平居中，然后通过transform:translateX(-50%)将其整体水平居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
4、给父元素设置display:flex，采用flex布局的元素相当于一个容器，它的所有子元素自动成为容器成员。
该容器默认存在两根轴：水平方向的主轴以及垂直方向的交叉轴。
然后通过justify-content:center将其子元素在主轴方向上居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
display: flex;
justify-content: center;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
垂直居中
-
行内元素
给行内元素添加line-hight:200px（该值为父元素的高度）
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
}
.son {
background-color: red;
line-height: 200px;
}
</style>
<div class='father'>
<span class="son">
sssssss
</span>
</div>
效果图：
-
块元素
1、同水平居中，先给父元素设置相对定位，子元素设置绝对定位，通过top:50%将子元素的左上角垂直居中，然后通过margin-top:-50px（该值为子元素高度的一半）将其整体垂直居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
效果图：
2、同水平居中，先给父元素设置相对定位，子元素设置绝对定位，通过top:50%将子元素的左上角垂直居中，然后通过transform:translateY(-50%)将其整体垂直居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
3、同水平居中，给父元素设置display:flex，采用flex布局的元素相当于一个容器，它的所有子元素自动成为容器成员。
该容器默认存在两根轴：水平方向的主轴以及垂直方向的交叉轴。
然后通过align-items:center将其子元素在交叉轴方向上居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
display: flex;
align-items: center;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
垂直水平居中
1、垂直水平居中理所当然的是将水平居中和垂直居中合起来就行了。
先给父元素设置相对定位，子元素设置绝对定位，通过top:50%和left:50%将子元素的左上角垂直水平居中，然后通过transform:translate(-50%，-50%)将其整体垂直水平居中（translate中第一个参数即translateX，第二个参数即translateY）。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
效果图：
2、先给父元素设置相对定位，子元素设置绝对定位，通过top:50%和left:50%将子元素的左上角垂直水平居中，然后通过margin-top:-50px（该值为子元素高度的一半）和margin-left:-50px（该值为子元素宽度的一半）将其整体垂直水平居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
3、先给父元素设置相对定位，子元素设置绝对定位，通过top:0，left:0，right:0和bottom:0将子元素的左上角定于父元素的左上角，然后通过margin:auto将其整体垂直水平居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>
4、给父元素设置display:flex，采用flex布局的元素相当于一个容器，它的所有子元素自动成为容器成员。
该容器默认存在两根轴：水平方向的主轴以及垂直方向的交叉轴。
然后通过justify-content:center和align-items:center将其子元素在主轴方向和交叉轴方向上居中。
<style>
.father {
width: 200px;
height: 200px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class='father'>
<div class="son">
sssssss
</div>
</div>