工作中我們經常遇到需要把一個標簽，在一個容器中垂直水平居中，但是我們又可能不確定這個標簽的寬高，或者是不固定寬高，那怎么做呢？
網上很多都是標簽內放文字，幾行幾行來做，針對不同行數做不同方法。今天我就說說一個標簽整體來垂直水平居中吧，面試也會經常遇到這種問題。
首先說說已知寬高的方法，用處也非常多，比如布局的時候，要絕對居中，或者是做banner圖的時候，也需要用到，不可能做一個放大縮小后整體在左，或者是在右吧，還有就是網站經常有那種一排標簽，中間有一張圖片，而且每張圖片大小寬高都不同，所有你不可能每一張單獨寫樣式吧，所以用處非常多。
先說說：已知寬高的我就說一種吧。利用定位，絕對居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開發</title>
</head>
<style>
.box{
width: 800px;
height:800px;
border:1px solid #000;
position:relative;
}
.box .cen{
width: 200px;
height: 200px;
background: #0ff;
position:absolute;
left:50%;
top:50%;
margin-left: -100px;
margin-top:-100px;
}
</style>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
下面我就先說說未知寬高圖片的垂直水平居中方法吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開發</title>
</head>
<style>
.box{
width: 800px;
height:800px;
border:1px solid #000;
display:table-cell;
text-align:center;
vertical-align: middle;
}
.box img{
vertical-align: middle;
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
那么，下面進入正題，說說未知寬高的方法吧。
方法一：利用定位+margin：auto
優點：這個方法目前我是絕對非常棒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鵬-前端開發</title>
<style>
.box{
width: 800px;
height: 800px;
border:1px solid #000;
position:relative;
}
.cen{
width: 200px;
height: 200px;
background: #0ff;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
方法二：利用display:table-cell
缺點：IE6 7 是不支持display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鵬-前端開發</title>
<style>
.box{
width: 800px;
height: 800px;
border:1px solid #000;
display:table-cell;
vertical-align: middle;
text-align:center;
}
.cen{
width: 200px;
height: 200px;
background: #0ff;
vertical-align: middle;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
方法三：使用css3 transform:translate(-50%; -50%)；
優點：高大上,可以在webkit內核的瀏覽器中使用
缺點：不支持IE9以下不支持transform屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開發</title>
</head>
<style>
.box{
position: relative;
height:800px;
width: 800px;
border:1px solid #000;
}
.box .cen{
width: 200px;
height: 200px;
background: #0ff;
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
方法四：使用css3 flex布局
優點：簡單 快捷
缺點：兼容不好吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開發</title>
</head>
<style>
.parent4{
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height:800px;
border:1px solid #000;
}
.parent4 .child{
color:#fff;
width: 200px;
height: 200px;
background: #0ff;
}
</style>
<body>
<div class="parent4">
<div class="child"></div>
</div>
</body>
</html>
好了，一共就以上幾種方法，看網上有的說插入一個空標簽之類的，我覺得不怎么好，畢竟需要插入一個空標簽，還是不如我這幾種方法，大家覺得哪種喜歡就用哪種吧。 我是比較推薦第一種定位布局的那個。
以上，結束。
