CSS元素垂直居中几种方法！！

短命女 2023-06-08 10:53 1阅读 0赞

一、子元素设置vertical-align: middle;但是有一个前提必须是子元素为行内元素；并且单独的设置vertical-align: middle;是无效的；如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直居中</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer{
    			width: 100px;
    			height: 100px;
    			background: blue;
    			text-align: center;
    		}
    		.Inner{
    			width: 50%;
    			height: 50%;
    			background: yellow;
    			display: inline-block;
    			vertical-align: middle;
    		}
    		/*.help{
    			width: 0;
    			height: 100%;
    			display: inline-block;
    			vertical-align: middle;
    		}*/
    	</style>
    </head>
    <body>
    	<div class="Outer">
    		<div class="Inner">
    			
    		</div>
    		<div class="help"></div>
    	</div>
    </body>
    </html>

结果为：

![2019101810214338.png][]

造成这个原因是因为子元素中的时候没有参照点，事实上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。如果把 vertical-align:middle 放到一个单元格元素，即table的td元素中，它的垂直居中显示是没任何问题的，因为它表示相对于改行的垂直高度居中显示。  
解决的方法就是在子元素下面设置一个空的元素作为参照点，如上图的类help标签，这样元素就会居中，如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直居中</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer{
    			width: 100px;
    			height: 100px;
    			background: blue;
    			text-align: center;
    		}
    		.Inner{
    			width: 50%;
    			height: 50%;
    			background: yellow;
    			display: inline-block;
    			vertical-align: middle;
    		}
    		.help{
    			width: 0;
    			height: 100%;
    			display: inline-block;
    			vertical-align: middle;
    		}
    	</style>
    </head>
    <body>
    	<div class="Outer">
    		<div class="Inner">
    			
    		</div>
    		<div class="help"></div>
    	</div>
    </body>
    </html>

结果为：

![2019101810275295.png][]

二、知道父元素和子元素的宽高的情况下，子元素浮动

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直居中</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer1{
    			width: 100px;
    			height: 100px;
    			background: blue;
    			overflow: hidden;
    		}
    		.Inner1{
    			width: 50%;
    			height: 50%;
    			background: yellow;
    			margin: 25px 0 0 25px;
    			float: left;
    		}
    	</style>
    </head>
    <body>
    	<div class="Outer1">
    		<div class="Inner1"></div>
    	</div>
    </body>
    </html>

，直接设置margin即可；

如下：

![20191018103545204.png][]

三、定位实现：父元素正常，子元素相对定位；这里有三种方法实现，一种是设置left，top，right，bottom调整位置，一种是根据CSS3的平移调整位置；还有一种是父元素相对定位，子元素绝对定位；

（1）top调整设置

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直居中</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer{
    			width: 100px;
    			height: 100px;
    			background: blue;
    			text-align: center;
    		}
    		.Inner{
    			width: 50%;
    			height: 50%;
    			background: yellow;
    			position: relative;
    			top: 25%;
    		}
    	</style>
    </head>
    <body>
    	<div class="Outer">
    		<div class="Inner">
    			
    		</div>
    	</div>
    </body>
    </html>

结果：

![20191018103545204.png][]

（2）CSS3调整

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直居中</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer{
    			width: 100px;
    			height: 100px;
    			background: blue;
    			text-align: center;
    		}
    		.Inner{
    			width: 50%;
    			height: 50%;
    			background: yellow;
    			position: relative;
    			margin: 0 auto;
    			transform: translateY(50%);
    		}
    	</style>
    </head>
    <body>
    	<div class="Outer">
    		<div class="Inner">
    			
    		</div>
    	</div>
    </body>
    </html>

结果：

![20191018103545204.png][]

（3）父元素和子元素都进行定位

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直居中</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer1{
    			width: 100px;
    			height: 100px;
    			background: blue;
    			position: relative;
    		}
    		.Inner1{
    			width: 50%;
    			height: 50%;
    			background: yellow;
    			position: absolute;
    			top: 25px;
    			left: 25px;
    		}
    	</style>
    </head>
    <body>
    	<div class="Outer1">
    		<div class="Inner1"></div>
    	</div>
    </body>
    </html>

结果：

![20191018103545204.png][]

四、flex布局

flex布局是父元素实现flex布局，使得父元素得内容进行垂直居中从而达到效果；

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>垂直居中</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer2{
    			width: 100px;
    			height: 100px;
    			background: blue;
    			display: flex;
    			align-items: center; /*垂直居中*/
    			justify-content: center; /*水平居中*/
    		}
    		.Inner2{
    			width: 50%;
    			height: 50%;
    			background: yellow;
    		}
    	</style>
    </head>
    <body>
    	<div class="Outer2">
    		<div class="Inner2"></div>
    	</div>
    </body>
    </html>

结果如下：

![20191018103545204.png][]

[2019101810214338.png]: /images/20230531/56edf45284964804a8bc2d46990e2643.png
[2019101810275295.png]: /images/20230531/e5c1f4e96bc542a3847646a9d6a3291d.png
[20191018103545204.png]: /images/20230531/9ad03701125846c88910a0e9f8ca1d85.png