实用技巧：如何用 CSS 做到完全垂直居中 - jerrylsxu(2)_H5之家

　　如果需要添加固定的标题，或者其他带偏移样式的元素，可以直接把类似top: 70px; 的样式写进内容区域的样式中。一旦声明了margin: auto; 的样式，内容块的top left bottom right的属性值也会同时计算进去。

　　如果想让内容块在贴近侧边的过程中保持水平居中，可以使用right: 0; left: auto; 让内容贴在右侧，或者使用left: 0; right: auto; 使内容贴在左侧。

.Absolute-Center.is-Fixed {

position: fixed;

z-index: 999;

}

　　带响应式

　　使用absolute的最大好处就是可以完美地使用带百分比的宽高样式！就算是min-width/max-width或者min-height/max-height也能够有如预期般的表现。

　　再进一步加上padding样式的话，absolute式的完全居中也丝毫不会破坏！

.Absolute-Center.is-Responsive {

width: 60%;

height: 60%;

min-width: 200px;

max-width: 400px;

padding: 40px;

}

　　带溢出内容

　　内容区高度大于可视区域或者一个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样式的方法。

　　使用注意：

　　图像

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

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

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

　　HTML:

　　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测试不能满足你的需求，你可能需要考虑其他的实现方案。

　　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;

}

　其他方法