如何在页面上水平居中放置 div（带有子 div）？答案

【问题标题】：How do you position a div (with child divs) horizontally centered on the page?如何在页面上水平居中放置 div（带有子 div）？
【发布时间】：2017-09-21 12:50:40
【问题描述】：

我想将一个 div 在页面上水平居中（该 div 包含四个像径向刻度盘一样的仪表，它们需要彼此相邻，而不是一行接一行）。我当前的 CSS（如下）显示彼此相邻的仪表，因此 float 属性似乎工作正常，但我为父 div （allgauges）设置的边距属性似乎无效。当我尝试将其与页面中心对齐时，我在“allgauges”中有几个 div 的事实是否会有所不同？任何帮助表示赞赏。

<!-- Embedded style sheet to change the margin spacing between the gauges -->
    <style>
     
     
    #one, #two, #three, #four
    {
	float: left;
	}
	 
    #allgauges
    {
		margin: 0 auto;
	}
        
    </style>

【问题讨论】：

sn-p 不包含 html
要居中#allgauges div，您必须将其宽度设置为 px 或 %
设置宽度就像一个魅力。谢谢！

标签： html css margin center positioning

【解决方案1】：

这个问题已被多次回答。这是解决方案：

.one,.two, .three,.four
{
  display:inline-block;
  vertical-align:middle;
  width:25%;
  text-align:center; /* This is not necessary.*/
  font-size:13px;
}
	 
.allgauges
{
   font-size:0;
}

<div class="allgauges">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

【讨论】：