如何水平居中< div>在另一个< div>中？ [英] How to horizontally center a <div> in another <div>?

问题描述

如何使用CSS在另一个< div> 内水平居中< div> 甚至可能）？

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

解决方案

最好的方法是使用 CSS 3 。

包厢模特：

  #outer {
 width：100％; 
 
 / * Firefox * / 
显示：-moz-box; 
 -moz-box-pack：center; 
 -moz-box-align：center; 
 
 / * Safari和Chrome * / 
显示：-webkit-box; 
 -webkit-box-pack：center; 
 -webkit-box-align：center; 
 
 / * W3C * / 
 display：box; 
 box-pack：center; 
 box-align：center; 
} 
 #inner {
 width：50％; 
 
 $ / code> 

根据您的可用性，您也可以使用框
$ b

Flex ：



#outer {
display：flex;
flex-direction：row;
flex-wrap：wrap;
justify-content：center;
align-items：center;
}


了解更多关于居中子元素的信息

• 链接2 链接3




• Link 4

这解释了为什么box模型是最好的方法：

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

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

解决方案

The best approaches are with CSS 3.

Box model:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

According to your usability you may also use the box-orient, box-flex, box-direction properties.

Flex:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Read more about centering the child elements

• Link 2

• Link 3

• Link 4

And this explains why the box model is the best approach:

• Why is the W3C box model considered better?

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