1. 简介

css2.1本身没有提供垂直居中的属性，都是通过一些巧妙的方法来实现，当然，都会有或多或少的缺点。所以，还是那句话，如果不考虑兼容到特定的浏览器，建议使用flex和grid。现在的浏览器升级换代非常快，不要把自己局限于消除兼容性bug之中。很可能你今天掌握的hack方法明天就彻底失去了意义。跟着规范走。

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. 包含多文本，图片或者其他内容的元素居中

一些方法在此我不想介绍，会在下一篇水平垂直居中文章中选择性提到。在此强烈推荐flex和grid的实现方式。
方法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的不同点在于inner的宽度。当然这个宽度是可以显示设置的。

全部频道

CSS常用布局实现02-垂直居中

1. 简介

2. 单行文本垂直居中

3. 包含多文本，图片或者其他内容的元素居中