Css3 实现居中的简单方法

[thonatos]

实现Div居中的方法比较多，
但浏览器兼容问题使得实现方式较为多变，这里分享一种最近使用的方法。

Html代码：

<div class="box">
<div class="goods">Goods</div>
</div>

CSS代码：

<style>

.box{
position:relative;
width: 200px;
height: 100px;
background-color: yellow;
}

.goods{

position:absolute;
top:50%;
left:50%;

-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
-o-transform: translate(-50%,-50%); /* Opera */
-moz-transform: translate(-50%,-50%); /* Firefox */
transform: translate(-50%,-50%);
background-color: red;
}
</style>

至于使用table-cell之类的方法，没意思，不多说了。

[loginv2]

LZ的方法居中的div必须有固定高度，有没有自适应的方案

[P233]

赞，传统方法一般定宽定高才能彻底居中，这个办法不限制

[Dzinlife]

没这么复杂
相对定位用 margin:auto;
绝对定位用 top:0;bottom:0;left:0;right:0;margin:auto;

[thonatos]

@Dzinlife

只是一种思路而已，也没有限制一定要固定高度。
margin: auto; 使用于Box本身，而这种的写法，是通用的，对于images等都可用。

[thonatos]

@loginv2

goods 相对于box做绝对定位，通过向下偏移并使用css3的transform回偏实现居中。

box 的话设置一个min-height即可，width，设置成auto或者100%好了。

[zjnewcity]

太复杂了吧。table，table-cell通吃所有啊，也就几行代码

[spinpx]

table table-cell +1

[thonatos]

@zjnewcity

复杂嘛？只不过多写了几行兼容浏览器的内容，貌似也就position和transform两条~

[patr0nus]

既然都 CSS3 了，直接上 flexbox 嘛

[thonatos]

@patr0nus

嗯嗯，谢谢~

[fen]

LZ 你这种会出问题的，当 goods 高度超过 box 高度时，边界就会溢出，当 goods 超过屏幕高度时，内容就被屏幕截断了

[thonatos]

@fen

谢谢提醒，现在写的很多样式都是百分比高度，很少出现那种状况啦~

3ks 。

[yangkeao]

伸缩盒布局垂直居中简单些。。

[jakwings]

http://css-tricks.com/centering-css-complete-guide/
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
各种方法各有优劣。

[hanai]

你用 transform 就不考虑兼容问题？负 margin 啊

[Niphor]

写CSS3 那就用flexbox
说CSS2 那就没啥万金油

[xinple]

http://css-tricks.com/centering-css-complete-guide/
这里有比较全的居中解决方案

css3的话flexbox简单好用
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}

[scarlex]

flexbox大法好，居中超简单