学步园

传统的水平居中样式 margin:
0
auto; 这个方法要求使用这个样式的dom元素,必须同时定义宽度width. 如果dom元素内容是不固定的,那么就无法定义宽度.所以这个地方就很难弄.

经过多次摸索终于找到解决方案. 经过测试发现兼容性还行.

.SecondMenuBody{
    display: table; /*重点就是这个属性,这个样式会告知浏览器当前元素的宽度,采用最小的宽度.不是默认全宽*/
    margin: 0 auto; 
}

<div id="父元素" >

   <div class="SecondMenuBody">这里的内容永远相对父元素水平居中</div>

</div>