文章目录
  1. 1. 单行内容
  2. 2. 绝对定位居中
    1. 2.1. 优点
    2. 2.2. 缺点
  3. 3. 负外边距
    1. 3.1. 优点
    2. 3.2. 缺点
  4. 4. 变形
    1. 4.1. 优点
    2. 4.2. 缺点
  5. 5. 表格单元格
    1. 5.1. 优点
    2. 5.2. 缺点
  6. 6. 行内块元素
    1. 6.1. 优点
    2. 6.2. 缺点
  7. 7. Flexbox
  8. 8. 参考

本来想直接在CSS(二)-常用效果实现中简单介绍一下垂直居中的实现方式的,但是晚上搜了搜资料之后发现,实现垂直居中的方式有很多,就决定专门在这篇文章中记录一下。

单行内容

DIV{  
    height:25px;  
    line-height:25px;  
    overflow:hidden;  
}  

只适用于只有一行文字的情况。

绝对定位居中

.Absolute-Center {  
  height: 200px;
  margin: auto;  
  position: absolute;  
  top: 0; left: 0; bottom: 0; right: 0;  //垂直居中于通过top,left,bottom和right属性定义的边界框内
}

同时:必须声明子组件高度,且父组件要加上

position: relative;

这样可以让子组件是相对父组件居中,而不是浏览器。

优点

  1. 支持跨浏览器,包括IE8-IE10.

  2. 无需其他特殊标记,CSS代码量少

  3. 支持百分比%属性值和min-/max-属性

  4. 只用这一个类可实现任何内容块居中

  5. 不论是否设置padding都可居中(在不使用box-sizing属性的前提下)

  6. 内容块可以被重绘。

  7. 完美支持图片居中。

缺点

  1. 必须声明高度(查看可变高度Variable Height)。

  2. 建议设置overflow:auto来防止内容越界溢出。

  3. 在Windows Phone设备上不起作用。

负外边距

如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;如下:

.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

优点

  1. 良好的跨浏览器特性,兼容IE6-IE7。

  2. 代码量少。

缺点

  1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。

  2. 内容可能溢出容器。

  3. 边距大小与padding,和是否定义box-sizing: border-box有关,计算需要根据不同情况。

变形

这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上top: 50%; left: 50%;

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

优点

  1. 内容可变高度

  2. 代码量少

缺点

  1. IE8不支持

  2. 属性需要写浏览器厂商前缀

  3. 可能干扰其他transform效果

  4. 某些情形下会出现文本或元素边界渲染模糊的现象

表格单元格

总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。

HTML:

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div> 

CSS:

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
} 

CSS中的vertical-align属性,只对HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<DIV>、<span>这样的元素是没有valign特性的。

优点

  1. 高度可变

  2. 内容溢出会将父元素撑开。

  3. 跨浏览器兼容性好。

缺点

  1. 需要额外html标记

行内块元素

基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

如果内容块宽度大于容器宽度,比如放了一个很长的文本,但内容块宽度设置最大不能超过容器的100%减去0.25em,否则使用伪元素:after内容块会被挤到容器顶部,使用:before内容块会向下偏移100%。

如果内容块需要占据尽可能多的水平空间,可以使用max-width: 99%;(针对较大的容器)或max-width: calc(100% -0.25em)(取决于支持的浏览器和容器宽度)。

HTML:

<div class="Center-Container is-Inline">
  <div class="Center-Block">
    <!-- CONTENT -->
  </div>
</div>

CSS:

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

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

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

.is-Inline .Center-Block {
  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+ */ 
}

优点

  1. 高度可变

  2. 内容溢出会将父元素撑开。

  3. 支持跨浏览器,也适应于IE7。

缺点

  1. 需要一个容器

  2. 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

  3. 内容块宽度不能超过容器的100% - 0.25em。

Flexbox

Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。

div
{
    width:350px;
    height:100px;
    border:1px solid black;

    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;

    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}

参考

  1. http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
文章目录
  1. 1. 单行内容
  2. 2. 绝对定位居中
    1. 2.1. 优点
    2. 2.2. 缺点
  3. 3. 负外边距
    1. 3.1. 优点
    2. 3.2. 缺点
  4. 4. 变形
    1. 4.1. 优点
    2. 4.2. 缺点
  5. 5. 表格单元格
    1. 5.1. 优点
    2. 5.2. 缺点
  6. 6. 行内块元素
    1. 6.1. 优点
    2. 6.2. 缺点
  7. 7. Flexbox
  8. 8. 参考