垂直水平居中方法小结

时间 2019-11-07

标签垂直水平居中方法小结繁體版

原文原文链接

前言：
最近看到不少面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲彻底居中的，这边对于文章中的内容作个小结。css

1、使用absolute(Absolute Centering)

1.1 具体代码以下：

.container {
    position: relative;
}

.absolute_center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 20px;
    overflow: auto;
}

<div class="container">
    <div class="absolute_center">
        <ul>
            <li>
                该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性
            </li>
        </ul>
    </div>
</div>

1.2 该方法的核心思想是：

使用absolute进行定位布局，脱离正常的块状元素流体特性，而经过absolute的流体特性完成垂直水平居中。

这里有两个基本知识点须要知道：html

1.流体特性：
块状水平元素，如div元素，在默认状况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；若是有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄；

2.absolute流体特性：
默认是不具备流体特性的，而是在特定条件下才具备，而这个条件就是"对立方向同时发生定位的时候"，即left与right为水平方向定位，top与bottom为垂直方向定位，而当对立方向同时具备定位数值的时候，absolute的流体特性就发生了。

1.3 优缺点：

优：
1.兼容性好，absolute流体特性IE7就兼容了，可兼容全部现代浏览器；
2.没有额外的标记html元素，样式简单；
3.内容的宽度以及高度写法支持使用百分比以及min-/max-写法；
4.对图像文件也一样支持；

缺：
1.必须定义内容的高度；
2.必须增长overflow属性来阻止若是内容的文本高度超出外层容器时出现的溢出状况；

2、负值外补侗法(negative margins)

这多是目前最经常使用的方法，在元素的高度以及宽度是固定数值的时候，经过设置该元素为相对布局脱离文档流，并设置top: 50%; left: 50%;，使用margin-left以及margin-top使元素彻底居中。web

2.1 具体代码以下：

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Negative {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -120px;
    background-color: cornsilk;
}

<div class="container">
    <div class="is-Negative">
    </div>
</div>

2.2 该方法的核心思想是：

使用相对布局，并使用top以及left使内容置于容器中心部位，再使用margin来控制偏移量。

这里有有个注意点：面试

当使用box-sizing:border-box属性的时候，偏移量是不须要计算border以及padding的。

2.3 优缺点：

优：
1.兼容性好，包括IE6-IE7
2.没有额外的标记html元素，代码量少；

缺：
1.非响应式的，不能配合百分比以及min-/max-使用；
2.必须增长overflow属性来阻止若是内容的文本高度超出外层容器时出现的溢出状况；
3.当元素使用box-sizing:border-box和使用默认的content-box偏移量是不同的，须要从新计算；

3、使用Transforms

3.1 具体代码以下：

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Transformed { 
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%; 
    left: 50%;
    padding: 20px;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    background-color: darkseagreen;
}

<div class="container">
    <div class="is-Transformed">
        <ul>
            <li>
                该方法的核心思想是使用相对布局，并使用top以及left使内容置于容器中心部位，再使用translate来控制偏移量
            </li>
        </ul>
    </div>
</div>

3.2 该方法的核心思想是：

使用相对布局，并使用top以及left使内容置于容器中心部位，再使用transform来控制偏移量。

3.3 优缺点：

优：
1.内容宽度以及高度自适应，能够不指定内容的宽度以及高度;
2.代码量少

缺：
1.兼容性差了点，因为transform不兼容IE8,因此只支持IE9及其以上的现代浏览器；
2.为了兼容各类浏览器，须要些额外的css前缀；
3.若是元素有使用transform属性，可能会影响到其余的变换效果；
4.在有些时候会出现边缘模糊的状况，这是浏览器渲染的问题，尤为是使用了transform-style: preserve-3d属性的时候

4、使用Table-Cell

这多是最好的垂直居中的方案，但存在一个最大的问题，须要额外的html元素，要使用table-cell完成垂直居中效果须要3个元素来完成。浏览器

4.1 具体代码以下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Table { 
  display: table; 
}

.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}

.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  background-color: deepskyblue;
}

<div class="container is-Table">
    <div class="Table-Cell">
        <div class="Center-Block">
            使用table-cell完成垂直水平居中
        </div>
    </div>
</div>

@import "./absolute_center4.png"{width="50%"}布局

4.2 该方法的核心思想是：

使用表格来实现垂直居中，再使用margin: 0 auto;来实现水平居中。

具体操做步骤以下：
1.设置父元素为块级表格；
2.设置子元素为表格单元格；
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中；
4.设置子元素中的内容的宽度，添加margin: 0 auto;属性，使子元素水平居中。

4.3 优缺点：

优：
1.内容高度自适应；
2.若是子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE8；

缺：
1.完成一个垂直居中效果，须要3个html元素；

5、使用Inline-block

这也是一种经常使用的垂直水平居中的方法，但会存在一个问题：当内容的宽度大于容器宽度-0.25em的时候，会发生内容上移到顶部的方法，因此须要一些小的技巧来避免这样的问题。flex

5.1 具体代码以下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  background-color: greenyellow;
  padding: 20px;
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

<div class="container is-Inline">
    <div class="Center-Block">
        使用inline-block完成水平垂直居中
    </div>
</div>

5.2 该方法的核心思想是：

和table有点相似，设置内容为inline-block块，设置vertical-align: middle;属性使元素垂直方向居中，再父容器设置text-align:center;使子元素水平方向居中；

5.3 优缺点：

优：
1.内容高度自适应；
2.若是子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE7；

缺：
1.依赖margin-left：-0.25em来矫正水平方向居中的偏差；
2.内容的宽度必须小于容器的宽度减去0.25em。

6、使用Flexbox

弹性布局是当前移动端比较流行的布局方式，它能够很优雅的完成垂直水平居中效果。flexbox

6.1 具体代码以下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.center_block {
  background-color: wheat;
  padding: 20px;
}

<div class="container is-Flexbox">
  <div class="center_block">
    使用flexbox完成水平垂直居中
  </div>
</div>

6.2 该方法的核心思想是：

使用弹性布局，align-items: center;使元素在侧轴方向居中（默认是垂直方向），justify-content: center;使元素在主轴方向居中（默认是水平方向）;

6.3 优缺点：

优：
1.内容宽度、高度自适应,即使文本溢出也很优雅；
2.可使用不少弹性布局的新特性；

缺：
1.兼容性比较差，目前只有IE10以上兼容；
2.须要写额外的兼容性前缀；
3.各个浏览器的表现可能会有一些差别；