CSS的12中水平垂直居中方法

H5_ljy

已于 2022-09-23 23:29:06 修改

阅读量553

点赞数 4

分类专栏： css 文章标签： css css3 html

于 2022-07-18 20:05:59 首次发布

本文链接：https://blog.csdn.net/qq_56973906/article/details/125858231

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、水平垂直居中的12种方法

一、水平垂直居中的12种方法

1.absolute + 负margin

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		body{
			position: relative;
			height: 100vh;     /* 必须设置高度,这里我设置的高度是在当前窗口水平垂直居中 */
		}
		#div1{
			position: absolute;
			top:50%;
			left: 50%;
			height: 300px;
			width: 300px;
			margin-top: -150px;    /* 设置为高度的一半 */
			margin-left: -150px;   /* 设置为宽度的一半 */
			background-color: aqua;
		}
	</style>
	<body>
	   <div id="div1">
	   	  
	   </div>
	</body>

2. absolute + margin:auto

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		body{
			position: relative;
			height: 100vh;
		}
		#div1{
			position: absolute;
			top:0;
			right: 0;
			bottom: 0;
			left: 0;
			height: 300px;
			width: 300px;
			margin: auto;
			background-color: aqua;
		}
	</style>
	<body>
	   <div id="div1">
	   	  
	   </div>
	</body>

3.absolute + calc

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		body{
			position: relative;
			height: 100vh;
		}
		#div1{
			position: absolute;
			top:calc(50% - 150px);   /* 减去高度的一半 */
			left: calc(50% - 150px); /* 减去宽度的一半 */
			height: 300px;
			width: 300px;
			background-color: aqua;
		}
	</style>
	<body>
	   <div id="div1">
	   	  
	   </div>
	</body>

4.absolute + translate

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		body{
			position: relative;
			height: 100vh;
		}
		#div1{
			position: absolute;
			top:50%;
			left: 50%;
			width: 300px;   
			height: 300px;
			transform:translate(-50%,-50%);
			background-color: aqua;
		}
	</style>
	<body>
	   <div id="div1">
	   	  
	   </div>
	</body>

5. flex + justify-content + align-items

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		body{
			display: flex;
			height: 100vh;
			justify-content: center;
			align-items: center;
		}
		#div1{
			width: 300px;
			height: 300px;
			background-color: aqua;
		}
	</style>
	<body>
	   <div id="div1">
	   	  
	   </div>
	</body>

6.flex + margin auto

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		body{
			display: flex;
			height: 100vh;
		}
		#div1{
			width: 300px;
			height: 300px;
			background-color: aqua;
			margin: auto;
		}
	</style>
	<body>
	   <div id="div1">
	   	  
	   </div>
	</body>

7. 网格布局：grid

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
		body{
			display: grid;
			height: 100vh;
		}
		#div1{
			width: 300px;
			height: 300px;
			background-color: aqua;
			justify-self: center;
			align-self: center;
		}
	</style>
	<body>
	   <div id="div1">
	   	  
	   </div>
	</body>

8.行内块元素 + line-height

	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	 }
		body{
			height: 100vh;
			line-height: 100vh;
			text-align: center;
		}
		#div1{
			width: 300px;
			height: 300px;
			background-color: aqua;
			display: inline-block;
			vertical-align: middle;
			line-height: 300px;
		}
	</style>
	<body>
	   <div id="div1">
		   <p>666666</p>
	   </div>
	</body>

9.行内块元素 + ::after 伪元素选择器

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#father {
			height: 800px;
			text-align: center;
			font-size: 0px;
			border: 1px solid #55A532;
		}

		#div1 {
			width: 300px;
			height: 300px;
			display: inline-block;
			vertical-align: middle;
			background-color: aqua;
		}

		#father::after {
			content: "";
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}
	</style>
	<body>
		<div id="father">
			<div id="div1">
			</div>
		</div>
	</body>

10.行内块元素 + css-table

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 100vh;
			width: 100vw;
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}

		#div1 {
			width: 300px;
			height: 300px;
			display: inline-block;
			background-color: aqua;
		}

	</style>
	<body>
		<div id="div1">
			
		</div>
	</body>

11. 行内块元素 + table

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#box {
			height: 100vh;
			width: 100vw;
			text-align: center;
		}

		#div1 {
			width: 300px;
			height: 300px;
			display: inline-block;
			background-color: aqua;
		}
	</style>
	<body>
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td id="box">
					<div id="div1">

					</div>
				</td>
			</tr>

		</table>
	</body>

12.行内块元素 + writing-mode

		* {
			margin: 0;
			padding: 0;
		}

		#div1 {
			height: 100vh;
			width: 100vw;
			text-align: center;
			writing-mode: vertical-lr;
			text-align: center;
		}
        #div2{
			display: inline-block;
			width: 100%;
			writing-mode: horizontal-tb;
			text-align: center;
		}
		#div3 {
			width: 300px;
			height: 300px;
			display: inline-block;
			background-color: aqua;
			margin: auto;
		}

	</style>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					
				</div>
			</div>
		</div>
	</body>