| Technique | Browser Support | Responsive | Overflow | resize:both | Variable Height | Major Caveats |
|---|---|---|---|---|---|---|
| Absolute Centering | Modern & IE8+ | Yes | Scroll, can overflow container | Yes | Yes* | Variable Height not perfect cross-browser |
| Negative Margins | All | No | Scroll | Resizes but doesn't stay centered | No | Not responsive, margins must be calculated manually |
| Transforms | Modern & IE9+ | Yes | Scroll, can overflow container | Yes | Yes | Blurry rendering |
| Table-Cell | Modern & IE8+ | Yes | Expands container | No | Yes | Extra markup |
| Inline-Block | Modern, IE8+ & IE7* | Yes | Expands container | No | Yes | Requires container, hacky styles |
| Flexbox | Modern & IE10+ | Yes | Scroll, can overflow container | Yes | Yes | Requires container, vendor prefixes |
一、absolute，margin: autocss
.container {
position: relative;
}
.content {
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
注意: 当没有指定内容块的具体的高度和宽度时，内容块会填满剩余空间。能够经过使用max-height来限制高度，也能够经过 display:table 来使高度由内容来决定，可是浏览器支持不是很好。html
二、relative，left top 50%，负margin-left margin-topgit
.isNegative {
position: relative;
width: 200px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -150px;
}
缺点:须要知道具体的高度和宽度github
三、relative，left top 50%，transform: translate(-50%,-50%)web
.content {
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
这里translate的百分比是相对于自身的，因此高度是可变的浏览器
四、Table-Cellflex
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
.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;
}
注意: 须要添加最内层的div，而且给div指定宽度和margin:0 auto;来使div居中。ui
五、Inline-Blockspa
htmlcode
<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+ */
} 空内容也会占据必定空间，须要margin-left:-0.25em;来抵消偏移
内容块的最大宽度不能是100%，不然会把::after的内容挤到下一行
六、Flex
html
<div class="contain">
<div class="content">
// content
</div>
</div> css
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} 最方便最简单的方式，可是要注意浏览器的支持
七、display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{
margin: auto;
}
八、display:-webkit-box
.box9{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center；
}
九、display:-webkit-box
这种方法，在 content 元素外插入一个 div。设置此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。
.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}