CSS垂直水平居中的各种解决方法汇总

方法一：使用flex布局
方法二：子元素们外部嵌套一层div，设置margin-left 和 margin-right 为 auto
效果图：
在这里插入图片描述
方法一：flex布局示例如下：
给父元素添加display: flex; 和 justify-content:center; 来使内部子元素水平居中

<div class="parent">
	<div class="child1">
	子元素1
	</div>
	<div class="child2">
	子元素2
	</div>
</div>

.parent{
	display: flex;
	justify-content:center;
	width:300px;
	background: green;
}
.child1{
	width:100px;
	background: red;
}
.child2{
	width:100px;
	background: pink;
}

多个垂直排列的块级元素水平居中

设置margin-left 和 margin-right 为 auto
效果图：
在这里插入图片描述

<div class="parent">
	<div class="child1">
	子元素1
	</div>
	<div class="child2">
	子元素2
	</div>
</div>

.parent{
	width:300px;
	background: green;
}
.child1{
	width:100px;
	background: red;
	margin: 0 auto;
}
.child2{
	width:100px;
	background: pink;
	margin: 0 auto;
}

CSS垂直居中

单行文本垂直居中

在这里插入图片描述
设置line-height和height相等（即高度和行高相等）
代码示例：

<div class="parent">
    文本垂直居中
</div>

.parent{
	width:200px;
	height: 50px;
	line-height: 50px;
	white-space: nowrap;  /* 不换行 */
	background: pink;
}

多行文本垂直居中

方法一：

父元素设置display:table；
子元素设置display:table-cell 和 vertical-align:middle
在这里插入图片描述

<div class="parent">
	<span>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</span>
</div>

.parent{
	display: table;
	width:200px;
	height: 200px;
	background: pink;
}
.parent span{
	display: table-cell;
	vertical-align: middle;
}

方法二：

父元素:
设置对应的height和line-height

子元素:
设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本
设置vertical-align:middle属性，使其基线对齐
设置line-height属性，覆盖掉继承自父元素的行高
在这里插入图片描述

<div class="parent">
	<p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</p>
</div>

.parent{
	width:200px;
	height: 200px;
	line-height: 200px;
	background: pink;
}
p{
	display: inline-block;
	line-height: 20px;  /*单独给子元素设置行高，覆盖父级元素的行高*/
	vertical-align: middle; /*基线居中对齐*/
}

方法三：

使用flex布局实现垂直居中
在这里插入图片描述

<div class="parent">
	<p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</p>
</div>

.parent{
	display: flex;
	width:200px;
	height: 200px;
	justify-content: center; 
	flex-direction: column;
	background: pink;
}

方法四：

在垂直居中的元素上添加伪元素，设置伪元素的高等于父级容器的高，然后为文本添加vertical-align: middle;样式，即可实现垂直居中
在这里插入图片描述

<div class="parent">
	<p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</p>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.parent::before{
	display: inline-block;
	content: " ";
	width: 1%;
	height: 100%;
	vertical-align: middle;
}
p{
	display: inline-block;
	vertical-align: middle;
	width: 190px;
}

块级元素垂直居中

方法一：

使用flex布局实现垂直居中（与前面的多行文本垂直居中方法三相同）
给父元素添加如下属性即可：

扫描二维码关注公众号，回复： 9335641 查看本文章

display: flex;
flex-direction: column; 
justify-content: center;

方法二：

已知元素高度，可使用绝对定位absolute来实现：
（水平居中同理）
在这里插入图片描述

<div class="parent">
    <div class="child">子元素</div>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.child{
	position:absolute;
	top:50%;
	height:100px;
	margin-top:-50px;
	background: red;
}

方法三：

不知道元素的高度。可使用transform的translate属性，将元素的中心和父容器的中心重合，从而实现垂直居中（水平居中同理）
在这里插入图片描述

<div class="parent">
	<div class="child">子元素</div>
</div>

.parent{
	position: relative;
	width:200px;
	height: 200px;
	background: pink;
}
.child{
	position: absolute; 
	top: 50%; 
	transform: translateY(-50%);
	background: red;
}