垂直居中(总结)

在工作中我们经常会遇到垂直居中的情况这里我对自己常用的垂直居中进行了总结

1、line-height

　　仅限单行文本且高度已知的标签使用, 所有样式先清除 * {maigin:0; padding: 0})

　　HTML模版代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <article class="SingleLine">
        <p>我是单行文本</p>
    </article>
</body>
</html>

　　CSS样式代码:

.SingleLine{
    height: 300px;
    border: 1px solid red;
    line-height: 300px;
}

2、line-height 和 vertical-align: middle 结合实现

　　　这个使用的前提是子元素要转换为行内块元素, 并且在父元素设置line-height 之后子元素要将line-height设置为默认或者根据实际情况设置但是不能不设置,如果不设置那么将会继承父元素的 line-height 这样如果子元素中还有子元素那么样式会有问题。为什么要设置 vertical-align: middle? 因为浏览器默认的元素放置在父元素的基线上。

　　HTML模版:(我们先设置了父元素的line-height)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .SingleLine{
            height: 100px;
            border: 1px solid red;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <article class="SingleLine">
        <div class="content">
            <p>我是第一行</p>
            <P>我是第二行</P>
        </div>
    </article>
</body>
</html>

　　　　CSS样式:

.content {
    background-color: red;
     300px;
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}`

　　这里设置300px 只是为了让大家更好的看到如果不设置 line-height:normal 会导致子元素的内容超出父元素

效果如下图:

　　由上图可以看出在子元素中如果还有多行子元素那么子元素需要设置line-height,如果不设置那么将会继承父元素的line-height会导致页面样式出现问题。

　　这里为什么要转为 inline-block呢？因为vertical-align只在行内块元素和行内元素起作用,

　　那么设置vertical-align的作用是什么呢？它的作用是设置元素的垂直对齐方式。默认的是元素放置在父元素的基线上，因为要实现居中所以我们这里要设置vertical-align: middle，将此元素放置在父元素的中部。

3、通过Position + transform 实现

　　通过position + transform实现垂直居中分为以下两种情况: 1、在不知道父元素高度的时候可以使用 position:absolute 2、在知道父元素高度的时候可以使用 position:relative

　　我们详细介绍一下：
　　1、在不知道父元素高度的时候可以使用 position:absolute

　　　　HTML模版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <article class="article">
        <div class="content">
            <p>我是第一行</p>
            <P>我是第二行</P>
        </div>
        <div>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
            <p>我是填充内容的</p>
        </div>
    </article>
</body>
</html>

　　这里下面添加了一个div 是为了撑起父元素的高度,因为这里要模拟父元素不确定高度。由于我们要使用postion: absolute, 所以要向父元素添加position:relative

CSS样式:

.article{
    position: relative;
    border: 1px solid red;
}
.content {
    background-color: red;
     300px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

　　这里先使用绝对定位然后设置top值 50% 这会使子元素的上边界位于父元素的中间所以要让子元素整个位于父元素的中间则使子元素向上平移自己高度的一半就可以了

　　2、在知道父元素高度的时候可以使用 position:relative

　　　　如果知道父元素的高度,那么我们就可以直接给子元素设置 position:relative属性: 具体CSS如下:

.article{
    height: 500px;
    border: 1px solid red;
}
.content {
    background-color: red;
     300px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

　　这里子元素设置相对定位,然后设置top:50%，会导致子元素的上边界位于父元素的中间所以要让子元素整个位于父元素的中间则使子元素向上平移自己高度的一半就可以了

4、display: table 和 vertical-align: middle 结合实现

　　这个的原理类似与第2种这里table-cell 将元素设置成了行内块级元素所以可以使用 vertical-align: middle使其居中

　　HTML模版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <article class="article">
        <div class="content">
            <p>我是第一行</p>
            <P>我是第二行</P>
        </div>
    </article>
</body>
</html>

　　CSS样式:

.article{
    display: table;
    height: 300px;
    border: 1px solid red;
}
.content {
    display: table-cell;
     300px;
    vertical-align: middle;
}

5、flex(弹性布局)

　　使用弹性布局需要先将父元素的display设置为flex, 然后flex提供了 align-items: 属性这个属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

所以我们很容易的就可以实现以下CSS样式(HTML模版和第4种方案提供的模版一样,这里就不重复写了)

.article{
    display: flex;
　　 align-items: center
    height: 300px;
    border: 1px solid red;
}

　　这里强调一下使用 align-items会将flex容器的所有子项全部设置为垂直居中, 假如你只想对一个子项设置垂直居中可以直接在该子项上添加 align-self: center 属性

CSS样式

.article{
    display: flex;
    height: 300px;
    border: 1px solid red;
}
.content {
    align-self: center;
}

6、grid(网格布局)

　　grid布局也给我们提供了 align-items 将全部的子项设置为垂直居中，所以使用起来也很简单

.article{
    display: grid;
    border: 1px solid red;
    align-items: center;
}

　　和flex布局一样 align-items:center 会将grid容器的所有子项全部设置为垂直居中，如果你想使个别子项设置垂直居中只需要在需要设置的子项上添加 align-self:center 属性

.content{
    align-self: center;
}

总结

　　以上是我对垂直方式的几种方式的简单说明,可以看出使用目前流行的flex、grid布局实现起来很简单但是他们的兼容性不是很好,使用的使用一定要考虑兼容性问题。line-height的两种方式也可以实现垂直居中但是局限性很大, table-cell 也可以实现但是目前table布局也慢慢的被弃用,所以个人感觉使用position和transform 是很好的选择, 但是如果不考虑兼容性问题那么使用flex或者grid更为便捷。