水平垂直居中方案與flexbox布局

2024-04-27 15:16:12

字體：大中小

供稿：網(wǎng)友

行內(nèi)元素的水平居中

要實(shí)現(xiàn)行內(nèi)元素（<span>、<a>等）的水平居中，只需把行內(nèi)元素包裹在塊級(jí)父層元素（<div>、<li>、<p>等）中，并且在父層元素CSS設(shè)置如下：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	text-align: center;	background-color: #666;}#center {	color: #fff;	font-size: 20px;}</style></head><body><div id='container'> <span id = 'center'>#center</span> </div></body></html>
并且適用于文字，鏈接，及其inline或者inline-block、inline-table和inline-flex。塊狀元素的水平居中    
要實(shí)現(xiàn)塊狀元素（display:block）的水平居中，我們只需要將它的左右外邊距margin-left和margin-right設(shè)置為auto，即可實(shí)現(xiàn)塊狀元素的居中，要水平居中的塊狀元素CSS設(shè)置如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	height: 100px;	background: #d6d6d6;}#center {	margin: auto;	width: 100px;	height: 100px;	background-color: #666;	color: #fff;	display: flex;	align-items: center;	justify-content: center;	font-weight: bold;	font-size: 18px;}</style></head><body><div id='container'>  <div id = 'center'>#center</div></div></body></html>多個(gè)塊狀元素的水平居中    要實(shí)現(xiàn)多個(gè)水平排列的塊狀元素的水平居中，傳統(tǒng)的方法是將要水平排列的塊狀元素設(shè)為display:inline-block，然后在父級(jí)元素上設(shè)置text-align:center，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	height: 100px;	background: #d6d6d6;}#center {	margin: auto;	width: 100px;	height: 100px;	background-color: #666;	color: #fff;	display: flex;	align-items: center;	justify-content: center;	font-weight: bold;	font-size: 18px;}</style></head><body><div id='container'>  <div id = 'center'>#center</div>  <div id = 'center'>#center</div>  <div id = 'center'>#center</div></div></body></html>
 
   已知高度寬度元素的水平垂直居中    
法一.
絕對(duì)定位與負(fù)邊距實(shí)現(xiàn)。
利用絕對(duì)定位，將元素的top和left屬性都設(shè)為50%，再利用margin邊距，將元素回拉它本身高寬的一半，實(shí)現(xiàn)垂直居中。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	background: #d6d6d6;	height: 300px;	position: relative;}#center {	position: absolute;	top: 50%;	left: 50%;	margin: -50px 0 0 -50px;	width: 100px;	height: 100px;	background-color: #666;	color: #fff;	font-weight: bold;	font-size: 18px;}</style></head><body><div id='container'>  <div id = 'center'>#center</div></div></body></html>
 
法二.
絕對(duì)定位與margin。
這種方法也是利用絕對(duì)定位與margin，但是無需知道被垂直居中元素的高和寬。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	position: relative;	height: 300px;	background: #d6d6d6;}#center {	position: absolute;	margin: auto;	top: 0;	bottom: 0;	left: 0;	right: 0;	width: 100px;	height: 100px;	background-color: #666;	color: #fff;	font-weight: bold;	font-size: 18px;}</style></head><body><div id='container'>  <div id = 'center'>#center #center #center #center</div></div></body></html>
未知高度和寬度元素的水平垂直居中    
法一.  當(dāng)要被居中的元素是inline或者inline-block元素
當(dāng)要被居中的元素是inline或者inline-block的時(shí)候，可以巧妙的將父級(jí)容器設(shè)置為display:table-cell，配合text-align:center和vertical-align:middle即可以實(shí)現(xiàn)水平垂直居中。 
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	width: 600px;	height: 300px;	background: #d6d6d6;	display: table-cell;	text-align: center;	vertical-align: middle;}#center {	background-color: #666;	color: #fff;	font-weight: bold;	font-size: 18px;}</style></head><body><div id='container'> <span id='center'>#center</span> </div></body></html>
 
 法二. Css3顯威力
利用Css3的transform，可以輕松的在未知元素的高寬的情況下實(shí)現(xiàn)元素的垂直居中。 
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	height: 300px;	background: #d6d6d6;	position: relative;}#center {	position: absolute;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);	width: 100px;	height: 100px;	background-color: #666;	color: #fff;	font-weight: bold;	font-size: 18px;}</style></head><body><div id='container'>  <div id = 'center'>#center</div></div></body></html>
 
法三. flex布局輕松解決
使用flex布局，無需絕對(duì)定位等改變布局的操作，可以輕松實(shí)現(xiàn)元素的水平垂直居中。
核心代碼如下： 
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>垂直居中Demo</title><style type="text/css">#container {	height: 300px;	background: #d6d6d6;	display: flex;	justify-content: center;	align-items: center;}#center {	width: 100px;	height: 100px;	background-color: #666;	color: #fff;	font-weight: bold;	font-size: 18px;	display: flex;/*這個(gè)寫在這只是為了#center這幾個(gè)字的垂直居中*/	justify-content: center;	align-items: center;}</style></head><body><div id='container'>  <div id = 'center'>#center</div></div></body></html>
CSS3的transform和flex固然好用，但在項(xiàng)目的實(shí)際運(yùn)用中必須考慮兼容問題，大量的hack代碼可能會(huì)導(dǎo)致得不償失。
某些瀏覽器仍需使用前綴寫法:
.flexboxtest{
  display: flex;
  display: -webkit-flex; //Safari仍舊需要使用特定的瀏覽器前綴
}