元素水平垂直居中的几种方式_display flex水平居中

CSS元素水平垂直居中的几种方法

1.flex弹性盒

使用flex弹性盒的居中方式，我们只需要给与其父元素设置

	{
	display: flex;
	justify-content: center;
	align-items: center;
	}
1
2
3
4
5

这三个属性就可以让其内部元素水平垂直居中（父元素内只有一个子元素）

2.position定位

要求父元素是定位属性元素也就是position不为static

2.1margin负值

给要水平垂直的元素设置属性

	{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:负的元素宽的一半;
	margin-top:负的元素高的一半;
	}
1
2
3
4
5
6
7

2.2margin:auto;

给要水平垂直的元素设置属性

	{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	}
1
2
3
4
5
6
7
8

2.3translate

	{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	transform:translate(-50%,-50%);
	}
1
2
3
4
5
6
7
8

3.假元素对照（基本不用）

这个方法的原理是利用vertical-align来进行的
给要居中的元素加一个行内块元素设置属性为

 span{
	display: inline-block;
	width: 0;
	height: 100%;
	content: "";
	vertical-align: middle;
}
1
2
3
4
5
6
7

给要居中的元素设置属性

	{
	display: inline-block;
	vertical-align: middle;
	}
1
2
3
4

这样设置完成后元素就会在垂直方向上居中
在给父元素设置属性

	text-align:center;
1

4.grid布局

新的grid布局，父元素设置

	{
	display: grid;
    align-items: center;
    justify-content: center;
	}
1
2
3
4
5

元素的水平垂直居中就完成了

补充

行内块及行内元素在其父元素 text-align:center;即可

块级元素的居中需要设置

	margin: 0 auto
1

注:块级元素只有在设置过宽度之后，居中才会生效！原因是如果块级元素不设置宽度，则宽度默认为100%。