css-各种元素水平垂直居中实现方法

发表于 | 分类于

水平居中

文本水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 600px;
			height: 600px;
			margin: 200px;
			padding: 100px;
			background-color: #ff0;
			border: 1px solid #f00;
			text-align: center;
		}
	</style>
1
2
3
<div class="box">
	单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中单行文字居中
</div>

结果如下：

无论是单行还是多行文本，都可以用text-align: center; 控制文本居中。img等行内级别的元素都满足这个规律。

块级子盒子在父盒子中居中

根据块级盒子的特性，当我们不设置盒子宽度的时候，默认宽度为父亲盒子的100%。所以我们必须设置块级子盒子的宽度才能让其居中。

块级子盒子宽度小于父盒子宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 600px;
			height: 600px;
			margin: 200px;
			background-color: #ff0;
			border: 1px solid #f00;
		}
		.box .son{
			width: 300px;
			border: 3px solid #000;
			margin: 0 auto;
		}
	</style>
1
2
3
4
5
<div class="box">
		<div class="son">
			子盒子居中
		</div>		
	</div>

效果如图：

我上面用来 margin: 0 auto 的方法来居中，同时也可以用给子盒子设置左右相同的margin，margin值正好等于父盒子和子盒子宽度差值的一半。 来居中。即margin-left: 150px; margin-right: 150px;

块级子盒子宽度大于父盒子宽度

当块级子盒子的宽度大于父盒子的时候，子盒子会溢出：

1
2
3
4
5
6
7
8
9
10
11
.box{
			width: 600px;
			height: 600px;
			margin: 200px;
			background-color: #ff0;
			border: 1px solid #f00;
		}
		.box .son{
			width: 900px;
			border: 3px solid #000;
		}


此时再写margin: 0 auto; 盒子不会变化。因为auto的作用是让盒子的外边距无限撑到允许值的最大 如果我们写了margin : 0 auto; 这时候在浏览器中可以看到margin-left的值为0，margin-right的值为-306.这是因为margin要和父盒子的右边框对齐，所以会出现margin-right的值是-306.
此时，一般我们用定位的方法来居中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 600px;
			height: 600px;
			margin: 200px;
			background-color: #ff0;
			border: 1px solid #f00;
		}
		.box .son{
			width: 900px;
			border: 3px solid #000;
			position: relative;
			left: 50%;
			margin-left: -450px;
		}


这是使用定位方式，加上对应方向的margin方向值是子盒子的一半的负值。定位的属性值包括relative、absolute都能实现。

垂直居中

单行文本垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 600px;
			height: 600px;
			margin: 200px;
			background-color: #ff0;
			border: 1px solid #f00;
			line-height: 600px;
		}

	</style>
1
2
3
<div class="box">
		单行文本垂直居中
	</div>

效果如下：

设置行高和文本的盒子高度一致，即可达到垂直居中。

多行文字垂直居中

不太了解，之后再写。。。。

部分参考

https://www.cnblogs.com/xinjie-just/p/5916001.html