绝对定位居中

  • 这个方法就是利用绝对定位，使它的top、left、right、bottom都为0就可以实现居中

​演示结构：

1
2
3
4
5
<!-- 父盒子 -->
<div class="box">
    <!-- 子盒子 -->
	<div class="children_box"></div>
</div>

​ CSS样式结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}
.children_box {
	width: 100px;
	height: 100px;
	position: absolute; /* 绝对定位 */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
        /* margin要设为auto，作用是通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中 */
	margin: auto;
	background: #0400ff;
}
</style>

​样式效果：

Uqn9jK.png

  • 这个方法用在垂直居中都可以，就使它的上下为 0 就可以实现垂直居中

UqnSSC.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}
.children_box {
	width: 100px;
	height: 100px;
	position: absolute; /* 绝对定位 */
    /* 上下设为0 */
	top: 0;
	bottom: 0;
    /* margin要设为auto，作用是通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中 */
	margin: auto;
	background: #0400ff;
}
</style>

flex布局居中

  • 主轴设为居中，justify-content: center，一般主轴默认为x轴方向，那么就是水平居中，像下面这样👇

UqneBH.png

  • 侧轴设为居中，align-items: center，一般侧轴默认为y轴方向，那么就是垂直居中，像下面这样👇

UqnJna.png

  • 综上，父盒子设为flex布局，然后再将主轴和侧轴都设为center，就可以让子盒子达到整体居中的效果了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
    /* 弹性布局设置 */
	display: flex;
    /* justify-content 设置主轴上子元素排列方式,如果主轴是x轴则水平居中（一般默认是x轴） */
    justify-content: center;
    /* align-items 设置了侧轴上元素的排列方式，如果主轴是y轴则垂直居中（一般默认是y轴） */
    align-items: center;

}
.children_box {
	width: 100px;
	height: 100px;
	background: #0400ff;
}
</style>
  • 实现效果：

UqnaGT.png

translate居中

  • 移动 translate(x, y)

​ 比如 translate(50px,50px);

​ 上面这条可以通过translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素

​ 可以改变元素的位置，x、y可为负值；

translate(x,y); 水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

translateX(x); 仅水平方向移动（X轴移动）

translateY(y); 仅垂直方向移动（Y轴移动）

  • 可以通过设置父盒子为relative，即相对定位，子盒子设为absolute，即绝对定位，然后上和左都设为50%，再利用translate(-50% , -50%)实现在水平和垂直方向都移动-50%的相对距离，实现子盒子整体的居中效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
    position: relative;

}
.children_box {
	width: 100px;
	height: 100px;
	background: #0400ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
</style>