这是一个创建于 4055 天前的主题，其中的信息可能已经有所发展或是发生改变。
实现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之类的方法，没意思，不多说了。
但浏览器兼容问题使得实现方式较为多变，这里分享一种最近使用的方法。
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之类的方法，没意思，不多说了。
第 1 条附言 2014-09-14 16:40:50 +08:00
感谢各位的提醒，table cell之类的用法当然也可以实现，这里只是在说这样的方法而已。
（前端无底坑，想实现一个功能，方法自然很多，不用css还可以用js等等....就不说其他废话了吧？）
（前端无底坑，想实现一个功能，方法自然很多，不用css还可以用js等等....就不说其他废话了吧？）
 | 1 loginv2 2014-09-14 15:01:57 +08:00 LZ的方法居中的div必须有固定高度，有没有自适应的方案 |
 | 2 P233 2014-09-14 15:06:47 +08:00 赞，传统方法一般定宽定高才能彻底居中，这个办法不限制 |
 | 3 Dzinlife 2014-09-14 15:11:32 +08:00 没这么复杂 相对定位用 margin:auto; 绝对定位用 top:0;bottom:0;left:0;right:0;margin:auto; |
 | 4 SuYia OP |
| 5 SuYia OP @loginv2 goods 相对于box做绝对定位，通过向下偏移并使用css3的transform回偏实现居中。 box 的话设置一个min-height即可，width，设置成auto或者100%好了。 |
 | 6 zjnewcity 2014-09-14 15:42:20 +08:00 太复杂了吧。table，table-cell通吃所有啊，也就几行代码 |
 | 7 spinpx 2014-09-14 16:21:38 +08:00 table table-cell +1 |
 | 9 patr0nus 2014-09-14 16:25:59 +08:00  1 既然都 CSS3 了，直接上 flexbox 嘛 |
 | 11 fen 2014-09-14 16:46:49 +08:00 1 LZ 你这种会出问题的，当 goods 高度超过 box 高度时，边界就会溢出，当 goods 超过屏幕高度时，内容就被屏幕截断了 |
 | 13 yangkeao 2014-09-14 17:54:52 +08:00 伸缩盒布局垂直居中简单些。。 |
 | 14 jakwings 2014-09-14 18:50:50 +08:00 |
 | 15 hanai 2014-09-14 19:20:10 +08:00 你用 transform 就不考虑兼容问题？负 margin 啊 |
 | 16 Niphor 2014-09-15 09:35:34 +08:00 写CSS3 那就用flexbox 说CSS2 那就没啥万金油 |
 | 17 xinple 2014-09-15 14:25:05 +08:00 http://css-tricks.com/centering-css-complete-guide/ 这里有比较全的居中解决方案 css3的话flexbox简单好用 .parent { display: flex; flex-direction: column; justify-content: center; } |
 | /td> | 18 scarlex 2014-09-15 21:20:45 +08:00 flexbox大法好，居中超简单 |
Select Language