如何在父div中居中水平div

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

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

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

Answer 3

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px 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>