如何只用CSS做到完全居中-2

带溢出内容

内容区高度大于可视区域或者一个position: relative的容器，其内容可能会溢出容器，或被容器截断。只要内容区域没有超出容器（没有给内容容器预留padding的话，可以设置max-height: 100%;的样式），那么容器内就会产生滚动条。

.Absolute-Center.is-Overflow { 
  overflow: auto; 
} 



大小可调整

使用其他样式，或者使用JavaScript调整内容区的大小，也是不用手动重新计算的！如果设置了resize的样式，甚至可以让用户自行调节内容区域的大小。 “完全居中”法，无论内容区怎么改变大小，都会保持居中。

设置了min-/max- 开头的属性可以限制区块的大小而不用担心撑开容器。

.Absolute-Center.is-Resizable { 
  min-width: 20%; 
  max-width: 80%; 
  min-height: 20%; 
  max-height: 80%; 
  resize: both; 
  overflow: auto; 
} 



如果不设置resize: both的样式，可以设置transition样式平滑地在大小间切换。一定要记得设置overflow: auto样式，因为改变大小后的容器高宽很有可能会小于内容的高宽。 “完全居中”法是唯一一种能支持使用resize: both样式的方法。

使用注意：

需要设置max-width/max-height给内容区域留足够的空间，不然就有可能使容器溢出。
resize属性不支持移动版浏览器和IE8-10，如果用户体验很重要的话，请确保用户可以有其他替代方法来改变大小。
同时使用resize样式和transition会使用户在开始改变大小时产生等于transition效果时间等长的延时。
图像

图像也同样有效！提供相应的class，并指定样式 height: auto; ，就得到了一张随着容器改变大小的响应式图片。



请注意，height: auto; 样式虽然对图片有效，如果没有用到了后面介绍的‘可变高技巧’，则会导致普通内容区域伸长以适应容器长度。

浏览器很有可能是根据渲染结果填充了图像高度值，所以在测试过的浏览器中，margin: auto; 样式就像是声明了固定的高度值一般正常工作。

HTML:

<img src="http://placekitten.com/g/500/200" alt="" />

CSS:

.Absolute-Center.is-Image { 
  height: auto; 
} 
  
.Absolute-Center.is-Image img { 
  width: 100%; 
  height: auto; 
} 
 
  

可变高度

“完全居中”法的确需要声明容器高度，但是高度受max-height样式的影响，也可以是百分比。这非常适合响应式的方案，只需要设置好带溢出内容就行。



另一种替代方案是设置display: table样式居中，，不管内容的长度。这种方法会在一些浏览器中产生问题（主要是IE和Firefox）。我在ELL Creative的朋友Kalley写了一个基于Modernizr 的测试，可以用来检查浏览器是否支持这种居中方案。现在这种方法可以做到渐进增强。

注意要点： 这种方法会破坏浏览器兼容性，如果Modernizr测试不能满足你的需求，你可能需要考虑其他的实现方案。

与大小可调整技术是不兼容的
Firefox/IE8中使用display: table，内容区在垂直方向靠上，水平方向仍然居中。
IE9/10中使用display: table，内容区会跑到左上角。
移动版Safari中内容区是水平对齐的，但是如果使用了百分比的宽度，水平方向上会稍稍偏离中心。
Javascript:

/* Modernizr Test for Variable Height Content */ 
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) { 
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop); 
}); 

CSS:

.absolutecentercontent .Absolute-Center.is-Variable { 
  display: table; 
  height: auto; 
} 

其他方法

“完全居中”法是解决居中问题的好方法，同时也有许多可以满足不同需求的其他方法。最常见的，推荐的方法有负margin值、transform 法、table-cell法、inline-block法、以及现在出现的Flexbox法，这些方法其他文章都有深入介绍，所以这里只会稍稍提及。

负margin值

这或许是最常用的方法。如果知道了各个元素的大小，设置等于宽高一半大小的负margin值（如果没有使用box-sizing: border-box样式，还需要加上padding值），再配合top: 50%; left: 50%;样式就会使块元素居中。



需要注意的是，这是按照预想情况也能在工作在IE6-7下的唯一方法。

.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 */ 
} 

好处：

浏览器兼容性非常好，甚至支持IE6-7
需要的编码量很少
同时注意：

这是个非响应式的方法，不能使用百分比的大小，也不能设置min-/max-的最大值最小值。
内容可能会超出容器
需要为padding预留空间，或者需要使用box-sizing: border-box样式。
transform法

和“完全居中”法的好处一样，简单有效，同时支持可变高度。为内容指定带有厂商前缀的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%); 
} 



好处：

内容高度可变
代码量小
同时注意：

不支持IE8
需要写厂商前缀
会和其他transform样式有冲突
某些情况下的边缘和字体渲染会有问题
table-cell法

这种可能是最好的方法，因为高度可以随内容改变，浏览器支持也不差。主要缺陷是会产生额外的标签，每一个需要居中的元素需要三个额外的HTML标签。



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; 
} 

好处：

内容高度可变
内容溢出则能自动撑开父元素高度
浏览器兼容性好
同时注意：

需要额外的HTML标签
inline-block法

迫切需要的方法：inline-block法居中。基本方法是使用 

display: inline-block

, 

vertical-align: middle

样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。

内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然，内容区域会被推到顶端，这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小！



如果内容块需要尽可能大地占用水平空间，可以为大容器加上max-width: 99%;样式，或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% – 0.25em) 样式。

这种方法和table-cell的大多数好处相同，不过最初我放弃了这个方法，因为它更像是hack。不管这一点的话，浏览器支持很不错，而且也被证实是很流行的方法。

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+ */ 

好处：

内容高度可变
内容溢出则能自动撑开父元素高度
浏览器兼容性好，甚至可以调整支持IE7
同时注意：

需要额外容器
依赖于margin-left: -0.25em的样式，做到水平居中，需要为不同的字体大小作调整
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度