CSS实现垂直居中的经常使用方法

时间 2019-11-09

原文原文链接

在前端开发过程当中，盒子居中是经常用到的。其中，居中又能够分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就能够实现。可是垂直居中相对来讲是比较复杂一些的。下面咱们一块儿来讨论一下实现垂直居中的方法。html

首先，定义一个须要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。代码以下：前端

<!DOCTYPE html>浏览器

<html lang="en">布局

<head>flex

    <meta charset="UTF-8">spa

    <title>index</title>orm

    <style>htm

        .content {blog

            width: 300px;开发

            height: 300px;

            background: orange;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

效果以下：

咱们须要使得这个橙色的div居中，到底该怎么办呢？首先咱们实现水平居中，上面已经提到过了，能够经过设置margin: 0 auto实现水平居中，代码以下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

效果以下：

很好，已经实现水平居中了！接下来该打大boss了——实现垂直居中。不过，在这以前，咱们先要设置div元素的祖先元素html和body的高度为100%（由于他们默认是为0的），而且清除默认样式，即把margin和padding设置为0（若是不清除默认样式的话，浏览器就会出现滚动条，聪明的亲，本身想一想问什么）。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html, body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto; /*水平居中*/

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

接下来，须要作的事情就是要让div往下移动了。咱们都知道top属性能够使得元素向下偏移的。可是，因为默认状况下，元素在文档流里是从上往下、从左到右紧密的布局的，咱们不能够直接经过top属性改变它的垂直偏移。这就须要使用position属性，设置它的值为relative，就能够经过top、bottom、right、left等属性使它在正常的文档流中发生位置偏移（注意，此时它在并无脱离文档流，原来的位置还会占据着的！）。对于position属性不熟悉的，能够本身去w3c看一下。设置了position: relative后的代码以下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html, body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

咱们刷新一下页面，发现跟以前是没有任何变化的，由于，咱们仅仅是使div脱离了文档流，可是还没开始移动他的垂直偏移。好，下面咱们就让它偏移吧！垂直偏移须要用到top属性，它的值能够是具体的像素，也能够是百分数。由于咱们如今不知道父元素（即body）的具体高度，因此，是不能够经过具体像素来偏移的，而应该用百分数。既然是要让它居中嘛！好，那么咱们就让它的值为50%不就好了吗？问题真的那么简单，咱们来试一下，就设置50%试一下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

效果以下图所示：

div垂直方向上面并无居中。明显是偏下了。下面，咱们在浏览器中间画一条红线用来参考，以下图：

经过观察上图，只要让div的中心移动到红线的位置，那么整个div就居中了。那怎么让它中心移动到红线处呢？从图中能够观察到，从div的中心到红线的距离是div自身高度的一半。这时候，咱们能够使用经过margin-top属性来设置，由于div的自身高度是300，因此，须要设置他的margin-top值为-150。为何是要设置成负数的呢？由于正数是向下偏移，咱们是但愿div向上偏移，因此应该是负数，以下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

            margin-top: -150px;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

效果以下：

确实已经居中了。好兴奋！有木有？！

除了能够使用margin-top把div往上偏移以外，CSS3的transform属性也能够实现这个功能，经过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。以下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            margin: 0 auto; /*水平居中*/

            position: relative; /*脱离文档流*/

            top: 50%; /*偏移*/

            transform: translateY(-50%);

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

效果以下：

上面的两种方法，咱们都是基于设置div的top值为50%以后，再进行调整垂偏移量来实现居中的。若是使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex便可。具体代码以下，对代码不作过多的解释，若是想了解弹性布局的能够看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        html,body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        body {

            display: flex;

            align-items: center; /*定义body的元素垂直居中*/

            justify-content: center; /*定义body的里的元素水平居中*/

        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

效果：

除了上面3中方法以外，固然可能还存在许多的能够实现垂直居中的方法。好比能够将父容器设置为display:table ，而后将子元素也就是要垂直居中显示的元素设置为 display:table-cell 。可是，这是不值得推荐的，由于会破坏总体的布局。若是用table布局，那么为何不直接使用table标签了？那不更加方便吗？