实现盒子的垂直水平居中

最新推荐文章于 2023-12-17 17:41:20 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2023-12-17 17:41:20 发布

阅读量398

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/echokkk/article/details/78419881

版权

css 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

方式一：使用绝对定位实现。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box1 {
			position: absolute;
			width: 100px;
			height: 200px;
			background-color: red;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -50px;
		}
	</style>
</head>
<body>
	<div class="box1">盒子</div>
</body>
</html>

方式二：使用固定定位结合css3中的transform属性。注意使用css3的属性的时候，记得加上私有前缀。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box1 {
			position: absolute;
			width: 100px;
			height: 200px;
			background-color: red;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
</head>
<body>
	<div class="box1">盒子</div>
</body>
</html>

方式三：使用绝对定位。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box1 {
			position: absolute;
			width: 100px;
			height: 200px;
			background-color: red;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="box1">盒子</div>
</body>
</html>

方式四：使用css3中的弹性盒子。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		html,body {
			height: 100%;
		}
		body {
			display: flex;
		}
		.box1 {
			width: 100px;
			height: 200px;
			background-color: red;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="box1">盒子1</div>
</body>
</html>

方式五：使用table-cell结合vertical实现垂直居中。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box1 {
			width: 500px;
			height: 500px;
			background-color: red;
			vertical-align: middle;
			display: table-cell; /* 垂直居中 */
			text-align: center; /* 水平居中 */
		}
		span { 
			display: inline-block;
			width: 100px;
			height: 100px;
			background: green;
		}
	</style>
</head>
<body>
	<div class="box1"><span>盒子1</span></div>
</body>
</html>

方式五：使用伪元素。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html {
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.box1 {
			width: 200px;
			height: 200px;
			background-color: red;
			vertical-align: middle;
			display: inline-block; 
		}
		body:before {
			content: "";
			display: inline-block;
			width: 0;
			height: 100%;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="box1">盒子1</div>
</body>
</html>

方式六：使用弹性盒子。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body,html {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center; /* 水平居中 */
			align-items: center; /* 垂直居中 */
		}
		.box1 {
			width: 200px;
			height: 200px;
			background-color: red; 
		}
	</style>
</head>
<body>
	<div class="box1">盒子1</div>
</body>
</html>

背着吉他的蝙蝠女侠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现盒子的垂直水平居中

方式一：使用绝对定位实现。代码如下： Document * { margin: 0; padding: 0; } .box1 { position: absolute; width: 100px; height: 200px; background-color: red; top: 50%; left: 50%;
复制链接

扫一扫