这是一个创建于 3725 天前的主题，其中的信息可能已经有所发展或是发生改变。
实现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
thonatos OP |
|
5
thonatos 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; } |
 |
18
scarlex 2014-09-15 21:20:45 +08:00
flexbox大法好，居中超简单
|
Select Language