CSS(3)实现水平垂直居中效果

CSS实现水平垂直居中对齐

在CSS中实现水平居中，会比较简单。常见的，若是想实现inline元素或者inline-block元素水平居中，能够在其父级块级元素上设置text-align: center实现；若是想实现块级元素的水平居中对齐，能够设置magin: auto。而若是想实现垂直居中对齐，或许就不太容易。

如下，我总结了一些实现水平垂直居中对齐的一些方法。若是有什么不足之处，望指出。

水平垂直居中的实现能够分为两大内容，一是高度随内容自适应变化，一是固定高度。

固定高度实现水平垂直居中

方法一

最经常使用的方法是使用height + line-height的方式，设置一样的值，配合text-align的使用，便可实现文本的水平垂直居中对齐

<div class="container">Hello World！</div>

.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

缺点：固定高度，没法实现两行文本的垂直居中对齐

方法二

使用绝对定位的方法，配合margin负值使用。能够实现元素的水平垂直居中效果。

<div class="container">Hello World！</div>

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

固然了，可使用CSS3的calc函数简化上面的CSS代码

.container {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

缺点：固定高度，高度没法自适应内容。元素脱离文档流。

方法三

添加空标签的方式，而且使该元素浮动，脱离文档流，避免影响其余元素的布局。

<div class="space"></div>
<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.space {
    float: left;
    height: 50%;
    margin-top: -150px;
}

.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

缺点：这种方式下的垂直居中须要固定高度，没法实现内容自适应高度。同时，出现多余的空div元素。

高度自适应实现水平垂直居中

方法一

CSS3中有transform属性，此属性下有一个translate移动函数，此函数接受两个参数。若是两个参数都为百分比值，此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative类似。

<div class="container">Hello World！</div>

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半
    border: 1px solid red;
}

优势：无需定高度。高度随内容自适应。
缺点：元素脱离文档流。若是须要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。

方法二

咱们知道，可使用margin来实现水平居中对齐，而没法使用margin实现垂直居中的缘由在于margin的百分比值是基于宽度计算的。

<div class="container">Hello World！</div>

.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}

上面代码中，因为百分比是基于父元素（此时的父元素为body元素）的宽度计算的，因此此时的50%加上translate负值并不能实现垂直居中布局。

不过，CSS中存在一个vh（视口高度）,也就至关于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度，1vh=1%，即1vh等于视口高度的1%。vh单位的浏览器兼容性问题可看vh。所以，以上代码可改成以下，便可实现水平垂直居中效果。

<div class="container">Hello World！</div>

.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

方法三

CSS3中存在flex布局（伸缩布局盒模型，也叫弹性布局盒模型），对于flex熟悉的朋友来讲，使用flex实现水平垂直居中是再简单不过的了。

<div class="container">
    <div class="inner">
        <p>hello world!</p>
    </div>
</div>

.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

当咱们使父元素display: flex时，margin: auto不只能够水平居中，也可以实现垂直居中。这是由于auto外边距会平分水平或垂直方向上的额外空间。

固然，也可使用justify-content: center来定义弹性项目主轴的对齐方式，align-items: center来定义弹性项目侧轴的对齐方式。

<div class="container">
    <div class="inner">
        <p>hello world</p>
    </div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

方法四

可使用display: table来模拟表格，并给子元素设置display: table-cell，让其成为表格的某个单元格，同时设置vertical-align: middle，便可实现垂直居中布局

<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.container {
    display: table;         /* 让div以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

使用此种方式，不须要固定高度。只须要给定任意高度或者不给高度，便可实现水平垂直居中效果。