CSS实现div居中的六种方式

我就随便问问

已于 2022-02-16 22:16:51 修改

阅读量2.2k

点赞数

文章标签：前端 css css3

于 2022-02-16 22:08:46 首次发布

本文链接：https://blog.csdn.net/qq_45710388/article/details/122965603

版权

方式一

父亲与自己的宽高不变的情况下使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中方式一</title>
		<style type="text/css">
			.wrap{
				width:400px;
				height:400px;
				border-radius:10px;
				background-color: black;
				position: relative;
			}
			.item{
				width: 200px;
				height:200px;
				background-color: red;
				position: absolute;
				border-radius:10px;
				top: 50%;
				left:50%;
				/* margin-top为 自己的高度的一半 */
				margin-top: -100px; 
				/* margin-top为自己的宽度的一半  */
				margin-left: -100px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item"></div>
		</div>
	</body>
</html>

方式二

使用margin:auto;实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中二</title>
		<style type="text/css">
			.wrap{
				width:400px;
				height:400px;
				border-radius:10px;
				background-color: black;
				position: relative;
			}
			.item{
				width: 200px;
				height:200px;
				position: absolute;
				border-radius:10px;
				background-color: red;
				top: 0;
				left: 0;
				right:0;
				bottom: 0;
				/* 横竖都居中 */
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item"></div>
		</div>
	</body>
</html>

方式三

使用 transform: translate(-50%,-50%);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中三</title>
		<style type="text/css">
			.wrap{
				width:400px;
				height:400px;
				border-radius:10px;
				background-color: black;
				position: relative;
			}
			.item{
				width: 200px;
				height:200px;
				position: absolute;
				border-radius:10px;
				background-color: red;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item"></div>
		</div>
	</body>
</html>

方式四

使用display: table-cell;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中四</title>
		<style type="text/css">
			.wrap{
				width:400px;
				height:400px;
				border-radius:10px;
				background-color: black;
				display: table-cell;
				/* 水平居中 */
				text-align: center;
				/* 垂直居中 */
				vertical-align: middle;
			}
			.item{
				width: 200px;
				height:200px;
				border-radius:10px;
				background-color: red;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item"></div>
		</div>
	</body>
</html>

方式五

使用display: flex;

justify-content 和 align-items

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中5.1</title>
		<style type="text/css">
			.wrap{
				width:400px;
				height:400px;
				border-radius:10px;
				background-color: black;
				display: flex;
				/* 水平居中 */
				justify-content: center;
				/* 垂直居中 */
				align-items: center; 
				
			}
			.item{
				width: 200px;
				height:200px;
				border-radius:10px;
				background-color: red;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item"></div>
		</div>
	</body>
</html>

align-self: center; 和 margin: 0 auto; 或 align-self: center; 和 justify-content: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中5.2</title>
		<style type="text/css">
			.wrap{
				width:400px;
				height:400px;
				border-radius:10px;
				background-color: black;
				display: flex;
				/* 水平居中 */
				/* justify-content: center; */
			}
			.item{
				width: 200px;
				height:200px;
				border-radius:10px;
				background-color: red;
				/* 垂直居中 */
				align-self: center;
				/* 水平居中 */
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item"></div>
		</div>
	</body>
</html>

方式六

使用display:grid;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中六</title>
		<style type="text/css">
			.wrap{
				width:400px;
				height:400px;
				border-radius:10px;
				background-color: black;
				display:grid;
			}
			.item{ 
				width: 200px;
				height:200px;
				border-radius:10px;
				background-color: red;
				
				/* 水平居中 */
				/* justify-self:center; */
				/* 垂直居中 */
				/* align-self: center; */

				/* 垂直水平居中 */
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="item"></div>
		</div>
	</body>
</html>