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

问题描述

如何使用CSS（如果可能）在 div 中水平居中 div ？

外部 div 有 width：100％：

 < div id =outerstyle = > < div id =inner> Foo foo< / div>< / div>  

b

解决方案

您可以将此CSS应用于内部div：

  #inner {
 width：50％; 
 margin：0 auto; 
} 
  

当然，您不必将宽度设置为50％。任何宽度小于包含div将工作。 margin：0 auto 是实际中心的位置。

如果您指定IE8 +具有这个：

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

这将使内部元素居中水平， 。

这里的工作示例：

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

 < div id =outerstyle = width：100％> < div id =inner> Foo foo< / div>< / div>  

b

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.

Working example here:

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

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

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