css上下左右居中（9种）
Technique Browser
Support
Responsive Overflow resize:both
Variable
Height
Major Caveats
Modern &
IE8+
Yes
Scroll, can
overflow
container
Yes Yes* not perfect cross-browser
All No Scroll
Resizes but doesn't
stay centered
No
Not responsive, margins must be
calculated manually
Modern &
IE9+
Yes
Scroll, can
overflow
container
Yes Yes Blurry rendering
Modern &
IE8+
Yes
Expands
container
No Yes Extra markup
Modern,
IE8+ & IE7*
Yes
Expands
container
No Yes Requires container, hacky styles
Modern &
IE10+
Yes
Scroll, can
overflow
container
Yes Yes
Requires container, vendor
prefixes
1、absolute，margin: auto
.container {
position: relative;
}
.content {
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
注意: 当没有指定内容块的具体的⾼度和宽度时，内容块会填满剩余空间。可以通过使⽤max-height来限制⾼度，也可以通过 display:table 来使⾼度由内容来决定，但是浏览器⽀持不是很好。
2、relative，left top 50%，负margin-left margin-top
.isNegative {
position: relative;
width: 200px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -150px;
}
缺点：需要知道具体的⾼度和宽度
3、relative，left top 50%，transform: translate(-50%,-50%)
.content {
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
这⾥translate的百分⽐是相对于⾃⾝的，所以⾼度是可变的
4、Table-Cell
<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居中。
5、Inline-Block
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+ */
}
空内容也会占据⼀定空间，需要margin-left:-0.25em；来抵消偏移
内容块的最⼤宽度不能是100%，否则会把::after的内容挤到下⼀⾏
6、Flex
html
absolute relative
<div class="contain">
<div class="content">
// content
</div>
</div>
css
.
container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
最⽅便最简单的⽅式，但是要注意浏览器的⽀持
7、display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{
margin: auto;
}
8、display:-webkit-box
.box9{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center；
}
9、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;
}
优点：
适⽤于所有浏览器
没有⾜够空间时(例如：窗⼝缩⼩) content 不会被截断，滚动条出现
缺点：
唯⼀我能想到的就是需要额外的空元素了(也没那么糟，⼜是另外⼀个话题)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。