子元素相对于父元素垂直和水平方向居中（css）

最新推荐文章于 2024-07-14 19:24:54 发布

enterlind

最新推荐文章于 2024-07-14 19:24:54 发布

阅读量5.8k

点赞数 2

分类专栏：布局类 web前端文章标签： html css flex transform

本文链接：https://blog.csdn.net/enterlind/article/details/81316756

版权

web前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

布局类

2 篇文章 0 订阅

订阅专栏

下面总结5种本人常用的基于css的水平和垂直方向居中的方法

1.子元素margin-top或父元素padding-top实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		.oBox{
			width: 200px;
			height: 200px;
			background: #ccc;
			overflow: hidden;
		}
		.smallBox{
			width: 50px;
			height: 50px;
			margin: 75px auto 0;
			background: red;
		}
		/*.oBox{
			width: 200px;
			height: 200px;
			background: #ccc;
			padding-top: 75px;
			box-sizing:border-box;
		}
		.smallBox{
			width: 50px;
			height: 50px;
			margin:0 auto;
			background: red;
		}*/
	</style>
</head>
<body>
	<div class="oBox">
		<div class="smallBox">内容</div>
	</div>
</body>
</html>

　　样式文件中高亮的是一种方法，注释的是一种，两种都可以，这种方法是最傻瓜式的（没有说这种不好，没有骂人0.0），使用中也有很多限制，必须要知道子元素和父元素的宽和高，而且父元素的padding-top或者子元素的margin-top要通过（父元素的高度 - 子元素的高度）/2，来计算得出，个人不太喜欢。

2.使用table方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}

		.oBox{
			display: table-cell;
		    vertical-align: middle;
		    text-align: center;
		    width: 200px;
		    height: 200px;
		    background: #ccc;
		}
		.smallBox{
			background:red;
			width: 50px;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="oBox">
		<div class="smallBox">内容</div>
	</div>
</body>
</html>

　　这种方法比较简单，而且是自适应的，即不管父元素宽高为多少，子元素都能相对于父元素居中。

3.使用定位position:absolute的方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		.oBox{
			position: relative;
			height: 200px;
			background: #ccc;
		}
		.smallBox{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background: red;
			width: 50px;
			height: 50px;
		}
	</style>
</head>
<body>
	<div class="oBox">
		<div class="smallBox">内容</div>
	</div>
</body>
</html>

　　这种方法也是现在比较多，首先父元素要定义position:relative;子元素相对于父元素定位，子元素必须margin:auto;而且需要定义好子元素的宽高；这种方法也是自适应父元素的。

4.使用transform:translate方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		.smallBox{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
</head>
<body>
	<div class="smallBox">
		内容<br>
		内容<br>
		内容<br>
		内容<br>
		内容<br>
		内容<br>
	</div>
</body>
</html>

　　这种方法本人用的最多，不需要定义子元素的宽和高，也不需要知道父元素的宽高，即可实现居中，主要是对子元素添加样式，父元素添加relative即可。

5.使用flex布局的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		body{
			display: flex;
			justify-content:center;
			align-items:center;
			height: 100vh;
		}
	</style>
</head>
<body>
	<div class="oBox">
		<div class="smallBox">
			内容<br>
			内容<br>
			内容<br>
			内容<br>
		</div>
	</div>
</body>
</html>

　　这种方法也很方便实现居中效果，限制也比较小，只要父元素添加css样式，当然父元素本身是有空间的（有宽和高）。

这就是本人使用过的居中方法，基本能满足日常中的各种需求，当然我相信还有其他更好的方法，希望贴上你们自己更优雅的方法。