stackoverflow高赞翻译 | 怎样在一个
中水平居中另一个

WEB前端 162 2017-11-09 10:39

译者注:居中问题是前端布局常见问题,受关注度较高,这次翻译的两份答案分别获赞3000+、1000+。还有部分答案获赞量三位数,就不一一翻译了。
原文地址:https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div

问题描述:

(如果可行的话,)我们怎样在一个

中水平居中另一个
?

Foo foo

(Ask by Mosh Feu)

高赞回答:

你可以给内部的

添加下面的CSS样式:

#inner {
  width: 50%;
  margin: 0 auto;
}

当然,并不是必须设置width: 50%;,任何小于子div的宽度都可以。margin: 0 auto;才是关键。
如果你要兼容IE8及以上的浏览器,下面的方式可以更好的替代:

#inner {
  display: table;
  margin: 0 auto;
}

它能使内部元素水平居中,而不需要设置width属性。
(Answered by bharadhwaj)

如果你不想给子div一个固定的宽,可以使用下面的方式:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

这使得内部div成为可以以文本对齐为中心的内联元素。
(Answered by Alfred)

文章评论

2 关注 / 24 粉丝

我无话可说