css垂直居中--div

最新推荐文章于 2025-04-18 20:43:03 发布

原创最新推荐文章于 2025-04-18 20:43:03 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #垂直居中

css 专栏收录该内容

16 篇文章

订阅专栏

面试到css的时候，人们经常会问给你一个div固定宽度.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.container{
			position: relative;
			width: 400px;
			height: 400px;
			border: 1px solid red;
		}
		.container .center{
			width: 80px;
			height: 80px;
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="center"></div>
	</div>
</body>
</html>

让它左右居中上下居中。

	position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -40px;
			margin-left: -40px;
		}

如果你这样回答，面试官又有可能会问：不知道div的宽高怎么办？

         .container .center{
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
			transform: translate(-50%, -50%);          //简洁的写法
		}

		.container .center{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}

这个两个方法可以，轮流注释掉看看效果。

还有一个给父级div加伪类的方法！同时给父级div价格text-align:center

.container:after{
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}

		.container .center{
			display: inline-block;
			vertical-align: middle;
		}

当然css3给我们送来一个好的助攻，就是flex布局！只需要给父级div加三句话：

.container{
			position: relative;
			width: 400px;
			height: 400px;
			border: 1px solid red;		

			justify-content:center;
			align-items:center;
			display:-webkit-flex;

		}

总共是五种方法，大家各取所需吧！如果你有更好的方法，please tell me without hesitation！

感觉回到的写英语作文的时代了！

以下是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.container{
			position: relative;
			width: 400px;
			height: 400px;
			border: 1px solid red;
			/*与方法四配合使用*/
			/*text-align: center;*/

			/*方法五*/
			/*justify-content:center;
			align-items:center;
			display:-webkit-flex;*/
		}
		.container .center{
			width: 80px;
			height: 80px;
			background-color: #ccc;
		}
	
		/*方法一*/
		.container .center{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -40px;
			margin-left: -40px;
		} 

		/*方法二*/
		/*.container .center{
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
			transform: translate(-50%, -50%);          //简洁的写法
		}*/

		/*方法三*/
		/*.container .center{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}*/

		/*方法四*/
		/*给container加一个text-aligin:center*/
		/*.container:after{
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}
		.container .center{
			display: inline-block;
			vertical-align: middle;
		}*/

	</style>
</head>
<body>
	<div class="container">
		<div class="center"></div>
	</div>
</body>
</html>

img p居中代码请戳我