工作中我們經(jīng)常遇到需要把一個(gè)標(biāo)簽，在一個(gè)容器中垂直水平居中，但是我們又可能不確定這個(gè)標(biāo)簽的寬高，或者是不固定寬高，那怎么做呢？
網(wǎng)上很多都是標(biāo)簽內(nèi)放文字，幾行幾行來(lái)做，針對(duì)不同行數(shù)做不同方法。今天我就說(shuō)說(shuō)一個(gè)標(biāo)簽整體來(lái)垂直水平居中吧，面試也會(huì)經(jīng)常遇到這種問(wèn)題。
首先說(shuō)說(shuō)已知寬高的方法，用處也非常多，比如布局的時(shí)候，要絕對(duì)居中，或者是做banner圖的時(shí)候，也需要用到，不可能做一個(gè)放大縮小后整體在左，或者是在右吧，還有就是網(wǎng)站經(jīng)常有那種一排標(biāo)簽，中間有一張圖片，而且每張圖片大小寬高都不同，所有你不可能每一張單獨(dú)寫(xiě)樣式吧，所以用處非常多。
先說(shuō)說(shuō)：已知寬高的我就說(shuō)一種吧。利用定位，絕對(duì)居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開(kāi)發(fā)</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>
下面我就先說(shuō)說(shuō)未知寬高圖片的垂直水平居中方法吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開(kāi)發(fā)</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>
那么，下面進(jìn)入正題，說(shuō)說(shuō)未知寬高的方法吧。
方法一：利用定位+margin：auto
優(yōu)點(diǎn)：這個(gè)方法目前我是絕對(duì)非常棒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鵬-前端開(kāi)發(fā)</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
缺點(diǎn)：IE6 7 是不支持display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鵬-前端開(kāi)發(fā)</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%)；
優(yōu)點(diǎn)：高大上,可以在webkit內(nèi)核的瀏覽器中使用
缺點(diǎn)：不支持IE9以下不支持transform屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開(kāi)發(fā)</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布局
優(yōu)點(diǎn)：簡(jiǎn)單 快捷
缺點(diǎn)：兼容不好吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬-前端開(kāi)發(fā)</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>
好了，一共就以上幾種方法，看網(wǎng)上有的說(shuō)插入一個(gè)空標(biāo)簽之類的，我覺(jué)得不怎么好，畢竟需要插入一個(gè)空標(biāo)簽，還是不如我這幾種方法，大家覺(jué)得哪種喜歡就用哪種吧。 我是比較推薦第一種定位布局的那個(gè)。
以上，結(jié)束。
