css块级元素垂直居中五种方法

最新推荐文章于 2024-04-28 07:07:21 发布

-常见-

最新推荐文章于 2024-04-28 07:07:21 发布

阅读量4.1k

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_37985836/article/details/106217185

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言

昨天收到京东的面试邀请，面试官是个小姐姐，第一道就是css问题，父元素高度不固定的情况下，如何让内部块元素垂直居中，当时紧张只想到第三种方法，结合网上资料整理了其他几种方法，以供后续翻看，供大家参考！

正文

第一种

在父元素添加display:flex;align-items:center
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素居中</title>
</head>
	<style>
		.outer{
		   background:#fc4964;
		   height:500px;
		   display:flex;
		   align-items: center;
		}
		.inner{
		  background:#fff;
		}
		</style>
<body>
	<div class='outer'>
		<div class='inner'>1111</div>
	</div>
</body>
</html>

结果图：

第二种

将父元素的position设置为position:relative，内部块元素设置为position:absolute;top:50%;并且margin-top向上移动元素的一半
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
	<style>
		.outer{
		   background:#fc4964;
		   height:500px;
           position:relative;
		}
		.inner{
		  background:#fff;
		  width:100px;
		  height:50px;
		  position:absolute;
		  top:50%;
		  margin-top:-25px
		}

	</style>
<body>
	<div class='outer'>
		<div class='inner'></div>
	</div>
</body>
</html>

效果图：

第三种

设置内部块元素为position：relative;top:50%;transform:translateY(-50%)
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
	<style>
		.outer{
		   background:#fc4964;
		   height:500px;
		}
		.inner{
		  background:#fff;
		  width:100px;
		  height:50px;
		  position:relative;
		  top:50%;
		  transform:translateY(-50%)
		}

	</style>
<body>
	<div class='outer'>
		<div class='inner'></div>
	</div>
</body>
</html>

结果如下：

第四种

类似第一种方法，设置父元素的display:flex;,然后设置子元素align-self: center;
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
	<style>
		.outer{
		   background:#fc4964;
		   height:500px;
			display:flex;
		}
		.inner{
		  background:#fff;
		  width:100px;
		  height:50px;
		  align-self: center;
		}

	</style>
<body>
	<div class='outer'>
		<div class='inner'></div>
	</div>
</body>
</html>

效果图已省略…

第五种

设置父元素display:table-cell; vertical-align: middle;
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
	<style>
		.outer{
		   background:#fc4964;
		   width:600px;
		   height:500px;
		   display:table-cell;
		   vertical-align: middle;
		}
		.inner{
		  background:#fff;
		  width:100px;
		  height:50px;
		}

	</style>
<body>
	<div class='outer'>
		<div class='inner'></div>
	</div>
</body>
</html>

效果如下：

总结

结合网上资料，整理了这一篇文章，后续有新方法再整理出来，码字不易，请多支持

-常见-

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
css块级元素垂直居中五种方法

目录前言正文第一种第二种第三种第四种第五种总结前言昨天收到京东的面试邀请，面试的是个小姐姐，第一道就是css问题，父元素高度不固定的情况下，如何让内部块元素垂直居中，当时只想到一种方法，因此记录下其他几种方法，以供后续翻看加深记忆正文第一种在父元素添加display:flex;align-items:center代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><titl
复制链接

扫一扫