css盒子水平垂直居中

最新推荐文章于 2025-05-16 09:49:31 发布

蛙。

最新推荐文章于 2025-05-16 09:49:31 发布

阅读量469

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css

本文链接：https://blog.youkuaiyun.com/weixin_43174759/article/details/97016024

html/css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了7种常见的盒子水平垂直居中的方法，包括定位、计算属性、margin外边距、弹性盒模型、table-cell、transform等，适用于不同场景的需求。

盒子水平垂直居中的常见方法

第一种，通过定位的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#big {
				width: 500px;
				height: 500px;
				background-color: red;
				position: relative;
			}
			#small {
				width: 200px;
				height: 200px;
				background-color: blue;	
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small"></div>
		</div>
	</body>
</html>

第二种，通过定位和计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#big {
				width: 500px;
				height: 500px;
				background-color: red;
				position: relative;
			}
			#small {
				width: 200px;
				height: 200px;
				background-color: blue;	
				position: absolute;
				left: calc(500px / 2 - 200px / 2);
				top: calc(500px / 2 - 200px / 2);
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small"></div>
		</div>
	</body>
</html>

第三种，通过margin外边距的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#big {
				width: 500px;
				height: 500px;
				background-color: red;
				overflow: hidden;
			}
			#small {
				width: 200px;
				height: 200px;
				background-color: blue;	
				margin: 0 auto;
				margin-top: calc(500px / 2 - 200px/2);
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small"></div>
		</div>
	</body>
</html>
	</body>
</html>

第四种，计算属性与maigin外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#big {
				width: 500px;
				height: 500px;
				background-color: red;
				overflow: hidden;
			}
			#small {
				width: 200px;
				height: 200px;
				background-color: blue;
				margin-top: calc(500px / 2 - 200px/2);
				margin-left: calc(500px / 2 - 200px/2);	
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small"></div>
		</div>
	</body>
</html>
	</body>
</html>

第五种，设置弹性盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#big {
				width: 500px;
				height: 500px;
				background-color: red;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#small {
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small"></div>
		</div>
	</body>
</html>
	</body>
</html>

第六种，通过table-cell进行设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#big {
				width: 500px;
				height: 500px;
				background-color: red;
				display: table-cell;
				vertical-align: middle;
			}
			#small {
				width: 200px;
				height: 200px;
				background-color: blue;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small"></div>
		</div>
	</body>
</html>
	</body>
</html>

第七种，通过transform进行设置


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        .div1 {
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
        }
        .div2 {
            height: 200px;
            width: 200px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
 
    </style>
</head>
<body>
<div class="div1">
    <div class="div2 center">
    </div>
</div>
</body>

以上有几种方式里面的设置有一些重复，在使用calc需要注意的地方子盒子的margin的left（top）等是父级的宽度(height)的一半减去子级的宽（height）的一半。