CSS垂直居中实现

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 589 阅读

文章标签：

#web前端 #CSS #前端 #HTML #垂直居中

web前端同时被 3 个专栏收录

27 篇文章

订阅专栏

开发

22 篇文章

订阅专栏

CSS

17 篇文章

订阅专栏

转载自：

CSS 专业技巧收集

CSS垂直居中问题解决方法

上一节，主要写了两种垂直居中的实现方法。后来无意间看到一篇关于CSS实现垂直居中的文章，讲了一种更为简单的实现方法，通过对父元素添加以下两行代码便可实现：

align-items: center;
display: flex;

完整Demo代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>垂直居中</title>
		<style>
			.vertical-align{
				width: 200px;
				height: 200px;
				outline: 1px solid #ADADAD;	/*利用outline代替border边框*/	
				/*以下两行代码实现垂直居中*/	
				align-items: center;
				display: flex;
			}
			.vertical-align p{
				margin: 0 auto;/*水平居中*/
			}
		</style>
	</head>
	<body>
		<!--垂直居中实现-->
		<div class="vertical-align">
			<p>垂直居中实现</p>
		</div>
	</body>
</html>

实现效果：