Css3 实现居中的简单方法

This topic created in 4432 days ago, the information mentioned may be changed or developed.

实现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之类的方法，没意思，不多说了。

Supplement 1 · Sep 14, 2014

感谢各位的提醒，table cell之类的用法当然也可以实现，这里只是在说这样的方法而已。

（前端无底坑，想实现一个功能，方法自然很多，不用css还可以用js等等....就不说其他废话了吧？）

translate

div

居中

18 replies • 2014-09-15 21:20:45 +08:00

loginv2

Sep 14, 2014

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

P233

Sep 14, 2014

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

Dzinlife

Sep 14, 2014

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

SuYia

Sep 14, 2014

@Dzinlife

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

SuYia

Sep 14, 2014

@loginv2

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

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

zjnewcity

Sep 14, 2014

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

spinpx

Sep 14, 2014

table table-cell +1

SuYia

Sep 14, 2014

@zjnewcity

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

patr0nus

Sep 14, 2014

既然都 CSS3 了，直接上 flexbox 嘛

SuYia

Sep 14, 2014

@patr0nus

嗯嗯，谢谢~

fen

Sep 14, 2014

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

SuYia

Sep 14, 2014

@fen

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

3ks 。

yangkeao

Sep 14, 2014

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

jakwings

Sep 14, 2014

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

hanai

Sep 14, 2014

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

Niphor

Sep 15, 2014

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

xinple

Sep 15, 2014

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

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

scarlex

Sep 15, 2014

flexbox大法好，居中超简单