css 垂直居中

本文主要是介绍css 垂直居中，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS 垂直居中是网页设计中的一个重要概念。它指的是在一个元素内部，该元素的上下内容能够完全重合，形成一条线。为了实现这一效果，CSS 提供了多种方法，其中最常用的是使用绝对定位和 transform 属性。

绝对定位

绝对定位是指一个元素相对于其原始位置进行定位，不会受到其他元素的干扰。我们可以通过设置元素的 position 属性为 absolute，然后设置 top、right、bottom 和 left 属性来控制元素的位置。例如，以下代码实现了一个 div 元素相对于其父元素进行垂直绝对定位：

<!DOCTYPE html>
<html>
<head>
	<title>绝对定位示例</title>
	<style>
		.container {
			position: relative;
			height: 200px;
			border: 1px solid black;
		}

		.vertically-centered {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="vertically-centered">
			这是一个垂直居中的元素！
		</div>
	</div>
</body>
</html>

在上面的代码中，我们创建了一个容器 div，并设置了其 position 属性为 relative。接着，我们在容器内部创建了一个垂直居中的元素，并设置了它的 position 属性为 absolute，同时通过 top 和 left 属性将其距离容器顶部和左边的距离设为 50%，最后通过 transform 属性将元素向左上方移动 50% 的距离，从而实现了垂直居中的效果。

transform 属性

transform 属性是一个 3D 变换，可以用来调整元素的形状、大小、旋转等。我们可以通过 transform 属性来实现元素的垂直居中。具体做法是：设置元素的 display 属性为 flex 或 grid，然后设置 align-items 属性为 center，justify-content 属性为 center。这样，元素就可以在该方向上实现了垂直居中。例如，以下代码实现了同一容器内部的另一个 div 元素相对于其本身进行垂直居中：

<!DOCTYPE html>
<html>
<head>
	<title>transform 垂直居中示例</title>
	<style>
		.container {
			position: relative;
			height: 200px;
			border: 1px solid black;
		}

		.vertically-centered {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 100%;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="vertically-centered">
			这是垂直居中的元素！
		</div>
	</div>
</body>
</html>

在上面的代码中，我们同样创建了一个容器 div，并在其中创建了一个垂直居中的元素。与前一个例子不同的是，我们使用了 display: flex 将元素的 display 属性设置为 flex，并设置了 align-items 和 justify-content 属性为 center。这样，元素就会在该方向上实现垂直居中。同时，我们还将元素的高度和宽度都设为 100%，使其充满整个容器。

这篇关于css 垂直居中的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS教程