元素水平垂直居中的方法汇总

[Cylwet]

元素水平垂直居中的方法有很多，我在此举几个比较常用的方法。

方法一：

  利用行内块元素的 vertical-align 和 text-align 实现行内块元素水平居中。

步骤：

1. 将元素转为行内块元素
2. 在元素后面写一个空的 span 标签或其他的 div 等不带间距的元素， 空标签不空格不回车
3. 在 style 中写上如下 css 代码：

span{
    display: inline-block;
    height: 100%;   ---   让这个标签成为最高的元素，所有元素和它对齐
    vertical-align: middle;   ---   让这个元素的中心成为父元素的基线
}

4. 给该行内块元素添加以下 css 代码：

元素{
	vertical-align: middle;   ---   让元素的中心与父元素的基线(父元素的基线在span的中心)对齐
}

5. 父元素设置 text-align: center

[Cylwet]

方法二：

.son{
	margin-top: (父高-子高)/2
	margin-left:(父宽-子宽)/2
}

[Cylwet]

方法三：

需要设置父元素相对定位，子元素绝对定位。

子{
	top: 50%;
	left:50%;
	margin-top: -自身高的一半
	margin-left: -自身宽的一半
}

[Cylwet]

方法四：

需要设置父元素相对定位，子元素绝对定位（或固定定位），子元素要设置宽高。
这个方法一般用来给弹窗设置水平垂直居中。

子{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

[Cylwet]

方法五：

需要设置父元素相对定位，子元素绝对定位。

子{
	top: 50%;
	left: 50%；
	transform: translate(-50%, -50%);
}

[Cylwet]

方法六：

设置 flex 布局

.father{
	display: flex;
	justify-content: center;
	align-items: center;
}

[Cylwet]

方法七：

设置 grid 布局

.fater{
	display: grid;
	place-items: center;
}