วิธีจัดกึ่งกลาง div ในแนวนอนภายใน div หลัก

ฉันจะศูนย์วิธีdivแนวนอนภายในแม่divด้วยCSS?

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

ฉันสมมติว่า div พาเรนต์ไม่มีความกว้างหรือความกว้างและ div ลูกมีความกว้างน้อยกว่า ต่อไปนี้จะกำหนดระยะขอบสำหรับด้านบนและด้านล่างเป็นศูนย์และด้านข้างจะพอดีโดยอัตโนมัติ สิ่งนี้จะเน้นที่ div

div#child {
    margin: 0 auto;
}

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

หากคุณต้องการให้ 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>   

คุณสามารถใช้ค่า "อัตโนมัติ" สำหรับระยะขอบด้านซ้ายและด้านขวาเพื่อให้เบราว์เซอร์กระจายพื้นที่ว่างเท่า ๆ กันทั้งสองด้านของ div ภายใน:

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

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