水平居中和垂直居中的类型

水平居中

  1. 行内元素

  2. 块级元素

    1. 宽度固定和不定情况
    2. 使用定位属性
    3. 使用flexbox布局

      垂直居中

  3. 单行的行内元素

  4. 多行的行内元素

  5. 块级元素

    水平垂直居中

  6. 已知高度和宽度的元素

  7. 未知高度和宽度的元素
    1. 使用定位属性
    2. 使用flex布局

      水平居中

      行内元素

  • 首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center; ```html

我是行内元素 

  2. - 如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
  3. ```html
  4. <style>
  5.     #father {
  6.         display: block;
  7.         width: 500px;
  8.         height: 300px;
  9.         background-color: skyblue;
  10.         text-align: center;
  11.        }
  12. </style>
  14. <span id="father">
  15.     <span id="son">我是行内元素</span>
  16. </span>

效果：
水平居中和垂直居中 - 图1

块级元素

方案一：(分宽度定不定两种情况)

  • 定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中） ```html

我是块级元素

  1. 效果：<br />![](https://cdn.nlark.com/yuque/0/2021/png/668690/1621577132990-df417716-5201-4505-b3fc-12eed040ff29.png#align=left&display=inline&height=224&id=u4c58cc8a&margin=%5Bobject%20Object%5D&originHeight=448&originWidth=751&status=done&style=none&width=375.5)
  3. -  不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center; 
  4. ```html
  5. <style>
  6.     #father {
  7.         width: 500px;
  8.         height: 300px;
  9.         background-color: skyblue;
  10.         text-align: center;
  11.     }
  13.     #son {
  14.         background-color: green;
  15.         display: inline;
  16.     }
  17. </style>
  19. <div id="father">
  20.     <div id="son">我是块级元素</div>
  21. </div>

效果：（将#son转换成行内元素，内容的高度撑起了#son的高度，设置高度无用）
水平居中和垂直居中 - 图2

方案二：使用定位属性

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

  • 定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%); ```html

我是块级元素

  2. - 不定宽度：利用css3新增属性transform: translateX(-50%);
  3. ```html
  4. <style>
  5.     #father {
  6.         width: 500px;
  7.         height: 300px;
  8.         background-color: skyblue;
  9.         position: relative;
  10. }
  12.     #son {
  13.         height: 100px;
  14.         background-color: green;
  15.         position: absolute;
  16.         left: 50%;
  17.         transform: translateX(-50%);
  18. }
  19. </style>
  21. <div id="father">
  22.     <div id="son">我是块级元素</div>
  23. </div>

效果：
水平居中和垂直居中 - 图3

方案三：使用flexbox布局实现（宽度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.         display: flex;
  7.         justify-content: center;
  8.     }
  10.     #son {
  11.         width: 100px;
  12.         height: 100px;
  13.         background-color: green;
  14.     }
  15. </style>
  17. <div id="father">
  18.     <div id="son">我是块级元素</div>
  19. </div>

效果：
水平居中和垂直居中 - 图4

垂直居中

单行的行内元素

只需要设置单行行内元素的”行高等于盒子的高”即可；

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.     }
  8.     #son {
  9.         background-color: green;
  10.         height: 300px;
  11.     }
  12. </style>
  14. <div id="father">
  15.     <span id="son">我是单行的行内元素</span>
  16. </div>

效果：
水平居中和垂直居中 - 图5

多行的行内元素

使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.         display: table-cell;
  7.         vertical-align:middle;
  8.     }
  10.     #son {
  11.         background-color: green;
  12.     }
  13. </style>
  15. <div id="father">
  16.     <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素
  17.       我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
  18. </div>

效果：
水平居中和垂直居中 - 图6

块级元素

方案一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

  • 定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%); ```html

我是块级元素

  2. - 不定高度：利用css3新增属性transform: translateY(-50%);
  3. ```html
  4. <style>
  5.     #father {
  6.         width: 500px;
  7.         height: 300px;
  8.         background-color: skyblue;
  9.         position: relative;
  10. }
  12.     #son {
  13.         width: 100px;
  14.         background-color: green;
  15.         position: absolute;
  16.         left: 50%;
  17.         transform: translateY(-50%);
  18. }
  19. </style>
  21. <div id="father">
  22.     <div id="son">我是块级元素</div>
  23. </div>

效果：
水平居中和垂直居中 - 图7

方案二：使用flexbox布局实现（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.         display: flex;
  7.         align-items: center;
  8.     }
  10.     #son {
  11.         width: 100px;
  12.         height: 100px;
  13.         background-color: green;
  14.     }
  15. </style>
  17. <div id="father">
  18.     <div id="son">我是块级元素</div>
  19. </div>

效果：
水平居中和垂直居中 - 图8

水平垂直居中

已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.         position: relative;
  7. }
  9.     #son {
  10.         width: 100px;
  11.         height: 100px;
  12.         background-color: green;
  13.         position: absolute;
  14.         top: 0;
  15.         right: 0;
  16.         bottom: 0;
  17.         left: 0;
  18.         margin: auto;
  19. }
  20. </style>
  22. <div id="father">
  23.     <div id="son">我是块级元素</div>
  24. </div>

效果：
水平居中和垂直居中 - 图9

方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: —元素宽度的一半px; margin-top: —元素高度的一半px;

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.         position: relative;
  7. }
  9.     #son {
  10.         width: 100px;
  11.         height: 100px;
  12.         background-color: green;
  13.         position: absolute;
  14.         left: 50%;
  15.         top: 50%;
  16.         margin-left: -50px;
  17.         margin-top: -50px;
  18. }
  19. </style>
  21. <div id="father">
  22.     <div id="son">我是块级元素</div>
  23. </div>

效果：
水平居中和垂直居中 - 图10

未知高度和宽度的元素

方案一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.         position: relative;
  7. }
  9.     #son {
  10.         background-color: green;
  11.         position: absolute;
  12.         left: 50%;
  13.         top: 50%;
  14.         transform: translateX(-50%) translateY(-50%);
  15. }
  16. </style>
  18. <div id="father">
  19.     <div id="son">我是块级元素</div>
  20. </div>

效果：
水平居中和垂直居中 - 图11

方案二：使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;

  1. <style>
  2.     #father {
  3.         width: 500px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.         display: flex;
  7.         justify-content: center;
  8.         align-items: center;
  9. }
  11.     #son {
  12.         background-color: green;
  13. }
  14. </style>
  16. <div id="father">
  17.     <div id="son">我是块级元素</div>
  18. </div>

效果：
水平居中和垂直居中 - 图12

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         .content {
  8.             width: 300px;
  9.             height: 300px;
  10.             background: orange;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="content"></div>
  16. </body>
  17. </html>

效果如下：

水平居中和垂直居中 - 图13

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         .content {
  8.             width: 300px;
  9.             height: 300px;
  10.             background: orange;
  11.             margin: 0 auto;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="content"></div>
  17. </body>
  18. </html>

效果如下：

水平居中和垂直居中 - 图14

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html, body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0; 
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="content"></div>
  23. </body>
  24. </html>

　 接下来，需要做的事情就是要让div往下移动了。我们都知道top属性可以使得元素向下偏移的。但是，由于默认情况下，由于position的值为static（静止的、不可以移动的），元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top、left等属性改变它的偏移。所以，想要移动元素的位置，就要把position设置为不是static的其他值，如relative,absolute,fixed等。然后，就可以通过top、bottom、right、left等属性使它在文档中发生位置偏移（注意，relative是不会使元素脱离文档流的，absolute和fixed则会！也就是说，relative会占据着移动之前的位置，但是absolute和fixed就不会）。设置了position: relative后的代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html, body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative; /*设置position属性*/
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="content"></div>
  24. </body>
  25. </html>

我们刷新一下页面，发现跟之前是没有任何变化的，因为，我们仅仅是使设置了元素的position=relative而已，但是还没开始移动他的垂直偏移。好，下面我们就让它偏移吧！垂直偏移需要用到top属性，它的值可以是具体的像素，也可以是百分数。因为我们现在不知道父元素（即body）的具体高度，所以，是不可以通过具体像素来偏移的，而应该用百分数。既然是要让它居中嘛！好，那么我们就让它的值为50%不就行了吗？问题真的那么简单，我们来试一下，就设置50%试一下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative; /*脱离文档流*/
  19.             top: 50%; /*偏移*/
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="content"></div>
  25. </body>
  26. </html>

效果如下：

水平居中和垂直居中 - 图15

  1. div垂直方向上面并没有居中。明显是偏下了。下面，我们在浏览器中间画一条红线用来参考，如下图：

margin-top方法


水平居中和垂直居中 - 图16

通过观察上图，只要让div的中心移动到红线的位置，那么整个div就居中了。那怎么让它中心移动到红线处呢？从图中可以观察到，从div的中心到红线的距离是div自身高度的一半。这时候，我们可以使用通过margin-top属性来设置，因为div的自身高度是300，所以，需要设置他的margin-top值为-150。为什么是要设置成负数的呢？因为正数是向下偏移，我们是希望div向上偏移，所以应该是负数，如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative;
  19.             top: 50%; /*偏移*/
  20.             margin-top: -150px; 
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="content"></div>
  26. </body>
  27. </html>

效果如下：

水平居中和垂直居中 - 图17

transform 方法

  1. 除了可以使用margin-top把div往上偏移之外，CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative;
  19.             top: 50%; /*偏移*/
  20.             transform: translateY(-50%);
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="content"></div>
  26. </body>
  27. </html>

效果如下：

水平居中和垂直居中 - 图18

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

flex方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         body {
  15.             display: flex;
  16.             align-items: center; /*定义body的元素垂直居中*/
  17.             justify-content: center; /*定义body的里的元素水平居中*/
  18.         }
  19.         .content {
  20.             width: 300px;
  21.             height: 300px;
  22.             background: orange;        
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="content"></div>
  28. </body>
  29. </html>

效果

水平居中和垂直居中 - 图19