1. 簡介
css2.1本身沒有提供垂直居中的屬性，都是通過一些巧妙的方法來實(shí)現(xiàn)，當(dāng)然，都會(huì)有或多或少的缺點(diǎn)。所以，還是那句話，如果不考慮兼容到特定的瀏覽器，建議使用flex和grid?，F(xiàn)在的瀏覽器升級換代非常快，不要把自己局限于消除兼容性bug之中。很可能你今天掌握的hack方法明天就徹底失去了意義。跟著規(guī)范走。
2. 單行文本垂直居中
這種情景，只要指定line-height和height同高即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>single-line-text</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background: gray;
line-height: 30px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrap">
inner content
</div>
</body>
</html>
3. 包含多文本，圖片或者其他內(nèi)容的元素居中
一些方法在此我不想介紹，會(huì)在下一篇水平垂直居中文章中選擇性提到。在此強(qiáng)烈推薦flex和grid的實(shí)現(xiàn)方式。
方法1： flex。使用align-items: center即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background: gray;
display: flex;
height: 60px;
align-items: center;
}
.inner {
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">inner content</div>
</div>
</body>
</html>
方法2：grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grid</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background: gray;
display: grid;
height: 60px;
align-items: center;
}
.inner {
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">inner content</div>
</div>
</body>
</html>
可以看到和flex的不同點(diǎn)在于inner的寬度。當(dāng)然這個(gè)寬度是可以顯示設(shè)置的。
