css垂直水平居中解决方案

写在前面：

垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。下面，我们来讲讲几个css中常用的垂直水平居中的解决方案

方法1:

1、把外层的div的显示方式设置为table，即display: table;

2、把内层的div的显示方式设置为table-ceil，即display: table-ceil;

这样一来，我们就可以把这格html结构看成表格和表格中的一个小格。由于表格中只有一个ceil，所以它会自动撑开整个表格，给它设置宽高是无效的，它的宽高是wrapper的宽高。ceil中的内容content就可以自动垂直居中了。

其中：

• 垂直居中： 利用vertical-align: middle;
• 水平居中： 利用text-align: center;

具体代码如下：

 <div class="wrapper">
   <div class="ceil">
     <div class="content">Hello world!</div>
   </div>
 </div>

css代码：

  .wrapper {
      display: table;
      width: 400px;
      height: 200px;
      background-color: red;
   }
   .ceil {
      display: table-cell;
      vertical-align: middle;
      background-color: blue;
      text-align: center;
   }

效果如下：

接着我们把content中的内容加长看看效果：

从上面可以看到，wrapper本来应该是红色背景的，但是现在整个ceil撑开了整个表格，所以把wrapper的背景覆盖了，呈现出蓝色。

优点：

• content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时，content不会被截断，也就是说content会自动撑开wrapper

缺点：

• 实现起来比较繁琐，需要额外嵌套的标签。

方法2：

绝对定位法。
1、我们把需要垂直水平居中的position设置为absolute。
2、设置top为0， left为0，margin为宽高一半的负值。即把盒先一种偏中间的地方，然后再进行微调：

<div class="container">
  <div class="content">Hello World!</div>
</div>

.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: blue;
   top: 50%;
   left: 50%;
   margin-top: -50px;  // 高的一半，视实际情况而定
   margin-left: -50px;  // 宽的一半，视实际情况而定
}

注意：绝对定位absolute，是相对于最近非static的祖先元素进行定位的，所以我们要在其相对定位的元素上定义display属性。

同样当文字溢出的时候：

优点：

• 适用于所有浏览器
• 不需要嵌套标签

缺点：

• 由于高度是限定好的，没有足够空间时，content会溢出，这时我们可以设置：overflow:auto; 这时当溢出的时候就会出现滚动条。

方法3:

在方法2的基础上进行改动，把margin负值改为transform和 translate

.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   background-color: blue;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

优点，不需要定义宽高，灵活性高

缺点：仍要注意截断问题

方法4:

这个方法使用了 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

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

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}

优点：

• 简单

缺点：

• IE(IE8 beta)中无效
• 无足够空间时，content 被截断，但是不会有滚动条出现

方法5:

最常用的单行文本居中
这个方法只能将单行文本居中。
1、把 line-height设置为那个对象的 height 值使文本垂直居中
2、把 text-align 设置为center，使文本水平居中

<div id="content">Hello world!</div>  

.content {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

优点：

• 适用于所有浏览器
• 无足够空间时不会被截断

缺点：

• 只对文本有效(块级元素无效)
• 多行时，断词比较糟糕

这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。

方法6:

完美居中方案 —— flex布局

.parent{
    display : flex;
    width : 300px;
    height : 300px;
    background-color : red;
}
.child{
    width : 100px;
    height : 50px;
    margin : auto;
    background-color: green;
}

关键点：
1、display：flex；
2、margin：auto；

参考资料：
css实现垂直居中的5种方法