css 垂直居中
阿新 • • 發佈：2017-05-30
color head word 偽類 width 實現 想想 ref pan
今天端午節， 可苦逼的是還得加班，不過三倍工資，開心多了，第一次拿，想想心裏似乎還有點小激動，好了，扯到為止，進入正題
今天偶然看到一個垂直居中的好方法，元素 未知高度，未知高度，未知高度（重要的話說三遍），采用 偽類 + vertical-align:middle 方式,
先上代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.main {
width: 400px;
height: 200px;
background-color: #eee;
text-align: center;
}
.main:after{
display: inline-block;
content: ‘‘;
height: 100%;
width: 0%;
vertical-align: middle;
}
.con{
display: inline-block;vertical-align: middle;
}
</style>
</head>
<body>
<div class="main">
<div class="con">test, 我是垂直居中的麽？</div>
</div>
</body>
</html>
父元素添加偽類 ，並將偽類width置為0，添加vertical-align:middle, 設置元素display： inline-block 或者 display： inline都可
這似乎是現在垂直居中的最好方法，既不用考慮瀏覽器版本的問題，也可以兼容大部分瀏覽器
原理：
1. 一個display：inline-block 元素 高度等於父元素高度， 垂直居中，後面的img元素也垂直居中，代碼如下
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box{
width:300px;
height:200px;
background-color: #eee;
}
.box img {
width: 100px;
vertical-align: middle;
text-align: center;
}
.con {
display: inline-block;
width: 100px;height: 100%;
background-color: red;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="con">hello,波先生</div>
<img src="./test/0.jpg">
</div>
</body>
</html>
效果如圖：
所以用偽元素占滿父元素寬高，並垂直居中，即可實現垂直居中。
祝大家端午節快樂。。
本文參考：張鑫旭老師的 http://www.zhangxinxu.com/wordpress/?p=61
css 垂直居中