css实现垂直居中的几种方法

最新推荐文章于 2023-02-13 10:53:40 发布

zsl888822

最新推荐文章于 2023-02-13 10:53:40 发布

阅读量1.2k

点赞数 7

分类专栏： CSS

本文链接：https://blog.csdn.net/zsl15039718107/article/details/102566067

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css实现垂直居中的几种方法

平常在开放过程中，经常会用到盒子居中，顾名思义居中可分为水平居中和垂直居中，其中水平居中比较容易很容易就做到，但是垂直居中常常困扰很多刚接触前端的一些人，今天没事就顺手总结一下目前实现垂直居中一些比较常用的方法，具体如下：

方法一：position
使用定位的方法，将父元素设置为相对定位relative，需要垂直居中的子元素设置为绝对定位absolute,需要垂直居中的子元素把它的 top 设置为 50％，margin-top 设置为负的需要垂直居中的子元素高度的一半。

具体代码实现：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>垂直居中</title>
	<style>
		*{
          margin: 0;
		  padding: 0;
		}
	    #parent {
			position:relative;
			height: 500px;
			width: 500px;
			background:green;
		}
		#children {
			position: absolute;
			width: 100px;
			height: 100px;
			background:red;
			top:50%;              /*垂直*/
		    margin-top:-50px;     /*居中*/
			
			left: 50%;            /*水平*/  
			margin-left: -50px;   /*居中*/  
		}	
	</style>
</head>
<body>
	<div id="parent">  
		<div id="children">
		</div>
	</div> 
</body>
</html>

在这里插入图片描述这种方法比较常用，其中这里也可以将marin-top和margin-left负值替换成，transform：translateX(-50%)和transform：translateY(-50%) 结果一样。

方法二：margin:auto
将父元素设置为相对定位relative，需要垂直居中的子元素设置为绝对定位absolute，将children设置为top:0,bottom:0;但是它有固定高度，所以不能上下都间距为0，故margin：auto;会使children垂直居中，左右同理。

具体代码实现：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>垂直居中</title>
	<style>
		*{
          margin: 0;
		  padding: 0;
		}
	    #parent {
			position:relative;
			height: 500px;
			width: 500px;
			background:green;
		}
		#children {
			position: absolute;
			width: 100px;
			height: 100px;
			background:red;
			top:0;
			right: 0;
			bottom: 0;
			left:0;
			margin: auto;
		}	
	</style>
</head>
<body>
	<div id="parent">  
		<div id="children">
		</div>
	</div> 
</body>
</html>

在这里插入图片描述
这种方法虽然简单，但是当子元素大于父元素时就会出现非想要结果，并且这种方法IE7及以下版本不支持。所以不推荐使用。

方法三：display:table-cell
设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

具体代码实现：


<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>垂直居中</title>
	<style>
		*{
          margin: 0;
		  padding: 0;
		}
	    #parent {
			display: table-cell;
			height: 500px;
			width: 500px;
			vertical-align: middle;
			background:green;
		}
		#children {
			width: 100px;
			height: 100px;
			vertical-align: middle;
			margin: 0 auto;
			background:red;
		}	
	</style>
</head>
<body>
	<div id="parent">  
		<div id="children">
		</div>
	</div> 
</body>
</html>

在这里插入图片描述这个方法IE7和IE6都不能识别 display: table-cell;（但是支持display: block等css1的属性！）
IE8以及以后版本可以识别！IE7和IE6能识别vertical-align:middle;

方法四：flex
将父元素设置为display:flex，并且设置align-items:center;justify-content:center;
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

具体代码实现：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>垂直居中</title>
	<style>
		*{
          margin: 0;
		  padding: 0;
		}
	    #parent {
			height: 500px;
			width: 500px;
			background:green;
			display: flex;
			display: -webkit-flex;   /* Safari */
			-webkit-align-items: center;
			align-items: center;             /*定义parent的元素垂直居中*/
			-webkit-justify-content: center;
			justify-content: center;         /*定义parent的里的元素水平居中*/
		}
		#children {
			width: 100px;
			height: 100px;
			background:red;
		}	
	</style>
</head>
<body>
	<div id="parent">  
		<div id="children">
		</div>
	</div> 
</body>
</html>