Question

如何将div水平居中于其div的父CSS内？

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

Answer 1

我假设父div没有宽度或宽度宽，而子div的宽度较小。以下内容将顶部和底部的边距设置为零，并将两侧自动调整。这使div居中。

div#child {
    margin: 0 auto;
}

Answer 2

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

Answer 3

您可以使用左边距和右边距的“自动”值让浏览器在内部div的两侧均匀分配可用空间：

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

Answer 4

只是出于兴趣，如果你想把两个或更多的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>

Answer 5

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

Answer 6

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child-canvas {
  flex-shrink: 0;
}

如何在父div中居中水平div

6 个答案: