如何在父div内水平居中div

114

如何居中div水平其父里面div用CSS？

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— 鹰
source

1

以下是将div居中放置的两种简单方法：垂直放置，水平放置或同时放置两个（纯CSS）：stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

我假设父div没有宽度或较宽的宽度，而子div具有较小的宽度。下面将把顶部和底部的边距设置为零，并使边自动适应。这使div居中。

div#child {
    margin: 0 auto;
}

— 马克·恩伯
source

@标记。您知道如何使其在IE6中工作吗？IE6确实很烂，但是仍然有人在使用它。

— Bakhtiyor 2011年

@Bakhtiyor：据我所知，确实如此。您看到什么问题？如果您遇到的某些特定问题以前没有涉及过，则可能要弹出一个新问题。我没有访问IE6进行检查的权限。

— Mark Embling

3

@Bakhtiyor：实际上考虑过，我认为在IE.old中，您还需要text-align: center;在parentdiv 上进行设置，然后再将其设置回左侧（或其他位置）child。不确定该问题是否会影响IE6 ...

— Mark Embling

@Mark和@Bakhtiyor由于某种原因child，我检查了所有版本的IE（IE6-8）时，我的div似乎都向左移动（与更兼容标准的浏览器相比）。而text-align: center;对于parent和text-align: left;为child固定它的所有版本。

— brookmarker'2

7

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— 詹姆斯·古德温
source

2

此解决方案支持IE 6，但请不要忘记将其添加text-align:left;到#child div

— Moak 2010年

1

text-align:center子div或父div？

— 艾尼斯·奈尔

6

只是出于兴趣，如果您想将两个或多个div居中（因此它们并排居中），那么下面是这样做的方法：

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— 保罗·克里斯·琼斯
source

4

您可以使用“ auto”值作为左边距和右边距，以使浏览器在div的两侧平均分配可用空间：

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
source

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— 苏菲安·哈索（Soufiane Hassou）
source