水平居中一个div在DIV [英] Horizontally center a div in a div

问题描述

我如何水平居中 DIV A DIV 使用CSS中（如果它甚至有可能）？

外 DIV 的宽度：100％：

＆LT; D​​IV ID =外的风格=宽度：100％＆GT ;   ＆LT; D​​IV ID =内与GT;富富＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

解决方案

您可以将这个CSS用于内部DIV：

#inner {     宽度：50％;     保证金：0汽车; }

当然，你不必宽度设置为50％。任何宽度小于包含div会工作。该保证金：0汽车是进行实际定心

如果您的目标IE8 +，它可能是最好能有这样：

#inner {     显示：表;     保证金：0汽车; }

这会使内部元件中心的水平和它的作品没有设置具体的宽度。

How can I horizontally center a div within a div using CSS (if it's even possible)?

The outer div has width:100%:

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

解决方案

You can apply this CSS to the inner div:

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

Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.

If you are targeting IE8+, it might be better to have this instead:

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

It will make the inner element center horizontally and it works without setting a specific width.

这篇关于水平居中一个div在DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！