"　　在前端开发过程中，盒子居中是常常用到的。其中，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的 margin: 0 auto 就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。　　首先，定义一个需要垂直居中的 div 元素，他的 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 7 浏览 • 4 个月前

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            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 属性可以使得元素向下偏移的。但是，由于默认情况下，由于 position 的值为 static（静止的、不可以移动的），元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过 top、left 等属性改变它的偏移。所以，想要移动元素的位置，就要把 position 设置为不是 static 的其他值，如 relative,absolute,fixed 等。然后，就可以通过 top、bottom、right、left 等属性使它在文档中发生位置偏移（注意，relative 是不会使元素脱离文档流的，absolute 和 fixed 则会！也就是说，relative 会占据着移动之前的位置，但是 absolute 和 fixed 就不会）。设置了 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; /* 设置 position 属性*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

我们刷新一下页面，发现跟之前是没有任何变化的，因为，我们仅仅是使设置了元素的 position=relative 而已，但是还没开始移动他的垂直偏移。好，下面我们就让它偏移吧！垂直偏移需要用到 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 </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        display</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> flex</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        align-items</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> center</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">/*</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">定义body的元素垂直居中</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">*/</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        justify-content</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> center</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">/*</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">定义body的里的元素水平居中</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">*/</span>
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">
    .content </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">{</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        width</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 300px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        height</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> 300px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
        background</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)"> orange</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>        
    <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</head>
<body>
<div class="content"></div>
</body>
</html>

效果：

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

关于 CSS 实现垂直居中的方法，就写这么多了。如果，发现哪里写的不对的或者有更好的方法的，请在评论提出来，这样大家可以一起讨论、共同进步！

2018 年 8 月 24 日更新

最近，看了张鑫旭老师的《CSS 世界》一书，不采用 CSS3，而是使用了 CSS2 的 vertical-align，通过一些黑科技手段实现了垂直居中，有兴趣的同学可以研究一下。具体实现如下：

假设类名是.dialog，则 HTML 如下：

<div class="container">
  <div class="dialog">
  </div>
</div>

核心 CSS 代码如下：

.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.container:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
display: inline-block;
vertical-align: middle;
text-align: left;
font-size: 14px;
white-space: normal;
}

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

相关帖子

随便看看

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