垂直居中(总结)

时间 2019-11-13

标签垂直居中总结繁體版

原文原文链接

在工做中咱们常常会遇到垂直居中的状况这里我对本身经常使用的垂直居中进行了总结css

一、line-height html

　　仅限单行文本且高度已知的标签使用, 全部样式先清除 * {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样式代码:post

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

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

　　　这个使用的前提是子元素要转换为行内块元素, 而且在父元素设置line-height 以后子元素要将line-height设置为默认或者根据实际状况设置可是不能不设置,若是不设置那么将会继承父元素的 line-height 这样若是子元素中还有子元素那么样式会有问题。为何要设置 vertical-align: middle? 由于浏览器默认的元素放置在父元素的基线上。spa

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

<!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样式:orm

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

　　这里设置width:300px 只是为了让你们更好的看到若是不设置 line-height:normal 会致使子元素的内容超出父元素htm

效果以下图:

　　由上图能够看出在子元素中若是还有多行子元素那么子元素须要设置line-height,若是不设置那么将会继承父元素的line-height会致使页面样式出现问题。

　　这里为何要转为 inline-block呢？由于vertical-align只在行内块元素和行内元素起做用,

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

三、经过Position + transform 实现

　　经过position + transform实现垂直居中分为如下两种状况: 一、在不知道父元素高度的时候可使用 position:absolute 二、在知道父元素高度的时候可使用 position:relative

　　咱们详细介绍一下：
　　一、在不知道父元素高度的时候可使用 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;
    width: 300px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

　　这里先使用绝对定位而后设置top值 50% 这会使子元素的上边界位于父元素的中间因此要让子元素整个位于父元素的中间则使子元素向上平移本身高度的一半就能够了

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

　　　　若是知道父元素的高度,那么咱们就能够直接给子元素设置 position:relative属性: 具体CSS以下:

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

　　这里子元素设置相对定位,而后设置top:50%，会致使子元素的上边界位于父元素的中间因此要让子元素整个位于父元素的中间则使子元素向上平移本身高度的一半就能够了

四、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;
    width: 300px;
    vertical-align: middle;
}

五、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;
}

六、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更为便捷。