css實現垂直居中6種方法

時間 2019-11-08

標籤 css 實現垂直居中方法欄目 CSS 简体版

原文原文鏈接

在一次次筆試，一次次的面試中，問到垂直居中的問題太多太多，可是我每一次回答，都好像都不能讓面試官太滿意，今天特地花點時間，整理一下css垂直居中問題。javascript

一、若是是單行文本。看代碼：css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrapper{
			width: 500px;
			height: 500px;
			background: gray;
		}

		#wrapper p{
			line-height: 500px;//行高=父級的height，垂直居中。
			text-align: center;//水平居中
		}
	</style>
</head>
<body>

<div id="wrapper">
	<p>這是一段要垂直水平居中的文字！</p>
</div>

</body>
</html>

效果如圖：html

說明：適用於單行文本，多行就不能夠了！java

二、對於已知高度的塊級元素，能夠採用絕對定位。看代碼：面試

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrapper{
			position: relative;//父級
			width: 500px;
			height: 500px;
			background: gray;
		}

		#wrapper p{
			position: absolute;//子級用絕對定位
			top:50%;//先定位到50%的位置
			height: 300px;//已知的高度
			margin-top: -150px;//往上提自己高度的一半
		}
	</style>
</head>
<body>

<div id="wrapper">
	<p>這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！</p>
</div>

</body>
</html>

效果如圖:app

適用：絕對定位爲頁面佈局沒有影響的狀況下可使用，而且子級的高度是已知的。佈局

三、對於已知子級元素的高度，並且不能用絕對定位來佈局的狀況，看代碼：spa

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrapper{
			background: gray;
			width: 500px;
			height: 500px;
			text-align: center;
			overflow: hidden;
		}
		
		#null{
			width: 100%;
			height: 50%;
			background: yellow;
		}

		#content {
			height: 100px;
			margin: -50px;
		}
	

	</style>
</head>
<body>

<div id="wrapper">
	<div id="null"></div>
	<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div>

</body>
</html>

　　效果如圖：3d

適用：對於絕對佈局有影響，不能適用position:absolute的元素，能夠用以上這種方法，思路是：用一個塊級元素，設置已知大小，在讓其高度達到父級容器的一半大小，再把要居中的元素往上提半個高度。跟方法2同理。htm

四、垂直居中一張圖片（行內元素）。看代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrapper{
			width: 800px;
			height: 800px;
			background: gray;
			text-align: center;
		}

		#wrapper img{
			vertical-align: middle;
		}
			
		#wrapper #block{
			background: blue;
			height: 100%;
			width: 0;
	
		}
	</style>
</head>
<body>

<div id="wrapper">
	<img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
	<img  id="block">
</div>

</body>
</html>

效果如圖：

看到這裏，細心的同窗可能會發現：

這裏的多了一個空的<img>標籤，爲何要這樣的，首先，要搞清楚vertical-align這個屬性的特色，它是相對兄弟級行高（line-height）來定位，它是相對兄弟級行高（line-height）來定位，它是相對兄弟級行高（line-height）來定位（重要事情說三遍），而且他僅對行內元素有效，因此，在要定位的元素後面加多一個行內元素img來撐開父級的行高，以此來居中。而後必須強調你一點，記得把後面img的src=""這個空屬性去掉，否則會留下一個空白框。如圖：

而後，有些同窗可能會有疑問，行內元素那麼多。爲何你要用<img>標籤呢！？

嗯嗯，也能夠用其餘行內元素，這裏我用<span>來試一試給你們看：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrapper{
			width: 800px;
			height: 800px;
			background: gray;
			text-align: center;
		}

		#wrapper img{
			vertical-align: middle;
		}
			
		#wrapper #block{
			background: blue;
			line-height: 800px;//跟父級同樣高
		
	
		}
	</style>
</head>
<body>

<div id="wrapper">
	<img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
	<span id="block"></span>
</div>

</body>
</html>

這樣的效果是同樣的，記得哦，在這裏不能夠用line-height:100%這樣來設置行高，詳情能夠查看個人另一個博客「line-height:150%和line-height:1.5的區別」，瞭解一下line-height用百分比的特性。

適用：通用行內元素。

五、子父級都未知高度的塊級元素居中，看代碼:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrapper{
			display: table;
			background: gray;
			width: 500px;
			height: 500px;
			text-align: center;
		}

		#content {
			display: table-cell;
			vertical-align: middle;
		}
			

	</style>
</head>
<body>

<div id="wrapper">
	<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div>

</body>
</html>

　效果如圖：

適用：低版本的IE67不兼容，還有就是即使父級overflow：hidden,隨着文本的增長，溢出的文本依舊不會隱藏，適用於少文字或者靜態文字。

六、絕對定位居中法，看代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrapper{
			position: relative;
			background: gray;
			width: 800px;
			height: 800px;	
		}
		
		#content {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin:auto;
		}
	

	</style>
</head>
<body>

<div id="wrapper">
	<img  id="content" src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
</div>

</body>
</html>

　　效果如圖：

首先，先感謝一下評論下方的@ 惟利是圖園友，感謝他的提醒。我嘗試了這種絕對定位的方法，果真很好用。可是其原理是什麼呢？

在這裏，我先說一下這種定位方法的優勢，能夠無視被居中元素的寬度和高度，從而實現絕對定位的居中。咱們來看看裏面的代碼，

這是什麼意思呢？

其實就是將元素未知的寬度高度的元素，使其讓它的top,bottom,left,right,都與父級的距離爲零，若是其元素寬高不夠的，就會用margin:auto去填充其大小。

從而實現了居中。

（這是本人的粗略理解，不必定準確!）

文章說明：我的查看各類資料，原創所得，觀點不必定準確，歡迎各路大牛勘誤，小女子感激涕零。