1. 簡(jiǎn)介
css2.1本身沒有提供垂直居中的屬性拐格，都是通過一些巧妙的方法來實(shí)現(xiàn)，當(dāng)然刑赶，都會(huì)有或多或少的缺點(diǎn)捏浊。所以，還是那句話撞叨，如果不考慮兼容到特定的瀏覽器金踪，建議使用flex和grid。現(xiàn)在的瀏覽器升級(jí)換代非弛怂快热康，不要把自己局限于消除兼容性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è)置的辽话。
