div居中的7种方法

涛哥

2022-7-5

站长随笔

前言

今天去面试，面试官问我你知不知道让div居中有哪些方法。

我直接就说了一个margin:auto/position定位！！！

回来以后，涛哥发现这部分好像真的没怎么去了解过，所以写了这篇文章！！！

下面涛哥将带你去真正了解div居中的几种方式！！！

使用margin: 0 auto

                        /* 使用margin: 0 auto */
			div:nth-of-type(1){
				width: 100%;
				height: 200px;
				background-color: purple;
			}
			div:nth-of-type(1) div{
				width: 100px;
				height: 100px;
				background-color: red;
				margin:  auto;
				line-height: 100px;
			}
		    <div>
		        <div>div1</div>
		    </div>

使用绝对定位 + 定位值都设置为0 + margin: auto

                        /* 使用绝对定位 + 定位值都设置为0 + margin: auto*/
			div:nth-of-type(2){
				width: 100%;
				height: 200px;
				background-color: blue;
				position: relative;
			}
			div:nth-of-type(2) div{
				width: 100px;
				height: 100px;
				background-color: orange;
				position: absolute;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				margin: auto;
			}
		   <div>
			<div>div2</div>
		   </div>

绝对定位+margin

                      /* 绝对定位+margin */
			div:nth-of-type(3){
				width: 100%;
				height: 200px;
				background-color: aqua;
				position: relative;
			}
			div:nth-of-type(3) div{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -50px 0px 0px -50px;
			}
		    <div>
			<div>div3</div>
		    </div>

绝对定位+ transform

                        /* 绝对定位+ transform */
			div:nth-of-type(4){
				width: 100%;
				height: 200px;
				background-color: palegoldenrod;
				position: relative;
			}
			div:nth-of-type(4) div{
				width: 100px;
				height: 100px;
				background-color: green;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		    <div>
			<div>div4</div>
		    </div>

使用flex

                       /* 使用flex */
			div:nth-of-type(5){
				width: 100%;
				height: 200px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: yellow;
			}
			div:nth-of-type(5) div{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
		    <div>
			<div>div5</div>
		    </div>

flex+margin:auto

                       /* flex+margin:auto */
			div:nth-of-type(6){
				width: 100%;
				height: 200px;
				display: flex;
				background-color: orange;
				/* position: relative; */
			}
			div:nth-of-type(6) div{
				width: 100px;
				height: 100px;
				background-color: blue;
				/* position: absolute; */
				margin: auto;
			}
		    <div>
			<div>div6</div>
		    </div>

使用grid

                       /* 使用grid */
			div:nth-of-type(7){
				width: 100%;
				height: 200px;
				background-color: red;
				text-align: center;
			    vertical-align: middle; 
				position: relative;
				display: grid;
				place-items: center;
			}
			 
			div:nth-of-type(7) div{
				width: 100px;
				height: 100px;
				background-color: purple;
				position: absolute;
			}
		    <div>
			<div>div7</div>
		    </div>

效果图

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>div居中的方式</title>
		<style>
			/* 使用margin: 0 auto */
			div:nth-of-type(1){
				width: 100%;
				height: 200px;
				background-color: purple;
			}
			div:nth-of-type(1) div{
				width: 100px;
				height: 100px;
				background-color: red;
				margin:  auto;
				line-height: 100px;
			}
			/* 使用绝对定位 + 定位值都设置为0 + margin: auto*/
			div:nth-of-type(2){
				width: 100%;
				height: 200px;
				background-color: blue;
				position: relative;
			}
			div:nth-of-type(2) div{
				width: 100px;
				height: 100px;
				background-color: orange;
				position: absolute;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				margin: auto;
			}
			/* 绝对定位+margin */
			div:nth-of-type(3){
				width: 100%;
				height: 200px;
				background-color: aqua;
				position: relative;
			}
			div:nth-of-type(3) div{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -50px 0px 0px -50px;
			}
			/* 绝对定位+ transform */
			div:nth-of-type(4){
				width: 100%;
				height: 200px;
				background-color: palegoldenrod;
				position: relative;
			}
			div:nth-of-type(4) div{
				width: 100px;
				height: 100px;
				background-color: green;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			/* 使用flex */
			div:nth-of-type(5){
				width: 100%;
				height: 200px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: yellow;
			}
			div:nth-of-type(5) div{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
			/* flex+margin:auto */
			div:nth-of-type(6){
				width: 100%;
				height: 200px;
				display: flex;
				background-color: orange;
				/* position: relative; */
			}
			div:nth-of-type(6) div{
				width: 100px;
				height: 100px;
				background-color: blue;
				/* position: absolute; */
				margin: auto;
			}
			/* 使用grid */
			div:nth-of-type(7){
				width: 100%;
				height: 200px;
				background-color: red;
				text-align: center;
			    vertical-align: middle; 
				position: relative;
				display: grid;
				place-items: center;
			}
			 
			div:nth-of-type(7) div{
				width: 100px;
				height: 100px;
				background-color: purple;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div>
			<div>div1</div>
		</div>
		<div>
			<div>div2</div>
		</div>
		<div>
			<div>div3</div>
		</div>
		<div>
			<div>div4</div>
		</div>
		<div>
			<div>div5</div>
		</div>
		<div>
			<div>div6</div>
		</div>
		<div>
			<div>div7</div>
		</div>
	</body>
</html>