实现垂直居中

喜娃哥
73 阅读8分钟

1. 使用table

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.parent {
				width: 800px;
				height: 600px;
				border: 1px solid pink;
			}
			.children {
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<table class="parent">
			<tr>
				<td class="children">
					一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
				</td>
			</tr>
		</table>
	</body>
</html>

image.png

2.使用div来代替table

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			div.table{
				display: table;/* 把div变成table */
				border: 1px solid pink;
				width: 800px;
				height: 600px;
			}
			div.td{
				display: table-cell;/* 把div变成td */
				vertical-align: middle;
				border: 1px solid skyblue;
			}
			div.children{
				border: 1px solid orange;
			}
		</style>
	</head>
	<body>
		<div class="table">
			<div class="td">
				<div class="children">
					一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
				</div>
			</div>
		</div>
	</body>
</html>

image.png

3.使用双伪元素

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.parent {
				width: 800px;
				height: 600px;
				text-align: center; /* 使其子元素水平居中 */
				border: 1px solid pink;
			}
			.children {
				display: inline-block;
				width: 300px;
				vertical-align: middle; /* 配合伪元素的100%高度可以达到垂直居中的效果 */
				border: 1px solid skyblue;
			}
			.parent::before,
			.parent::after {
				content: '';
				display: inline-block;
				height: 100%;
				vertical-align: middle;
				border: 1px solid orange;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="children">
				一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
			</div>
		</div>
	</body>
</html>

image.png

4. 绝对定位+ margin-top、margin-left

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.parent {
				position: relative; /* 子绝父相 */
				width: 800px;
				height: 600px;
				border: 1px solid pink;
			}
			.children {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -150px; /* 向上移动自身高度的一半 */
				margin-left: -200px; /* 向左移动自身宽度的一半 */
				width: 400px;
				height: 300px;
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="children">
				一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
			</div>
		</div>
	</body>
</html>

image.png

5.绝对定位+ margin

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.parent {
				position: relative; /* 子绝父相 */
				width: 800px;
				height: 600px;
				border: 1px solid pink;
			}
			.children {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 400px;
				height: 300px;
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="children">
				一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
			</div>
		</div>
	</body>
</html>

image.png

6. 绝对定位+ transform

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.parent {
				position: relative; /* 子绝父相 */
				width: 800px;
				height: 600px;
				border: 1px solid pink;
			}
			.children {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(
					-50%,
					-50%
				); /* 向上向左移动自身的一半 */
				width: 400px;
				height: 300px;
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="children">
				一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
			</div>
		</div>
	</body>
</html>

image.png

7.使用flex

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.parent {
				display: flex;
				justify-content: center; /* 主轴居中 */
				align-items: center; /* 侧轴居中(垂直居中) */
				width: 800px;
				height: 600px;
				border: 1px solid pink;
			}
			.children {
				width: 400px;
				height: 300px;
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="children">
				一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
			</div>
		</div>
	</body>
</html>

image.png

avatar
文章
阅读
粉丝