在div内部将div居中对齐？

Question

如何将三个浮动的 div 居中对齐在页面中心并嵌套在彼此之内？

<div style="width:100%">
     <div style="width:90%">
           <div style="width:80%">
                //Content
           </div>
     </div>
</div>  

- Zo Has

---

可能是重复的问题：如何在DIV中心对齐DIV？ - ChrisR

这里有两种简单的方法可以在div中心垂直、水平或同时居中（纯CSS）：https://dev59.com/bmct5IYBdhLWcg3wmOZN#31977476 - Michael Benjamin

可能是如何水平居中一个<div>？的重复问题。 - lesyk

Answer 1

在CSS中使用margin: auto。

<div style="background-color: red; height: 100px; width: 500px; margin: auto;">
     <div style="background-color: green; height: 100px; width: 300px; margin: auto;">
           <div style="background-color: blue; height: 100px; width: 100px; margin: auto;">
                //Content
           </div>
     </div>
</div>  

- socha23

---

谢谢，但我的div宽度是以百分比表示的，如100％、80％、50％。 - Zo Has

只需将像素宽度更改为百分比，代码仍然可以正常工作。我代码中重要的是 margin: auto。 - socha23

边距中的0是什么意思？ - Zo Has

margin有一个简写形式：margin: [top] [right] [bottom] [left]。margin: 0 auto是一个缩写版本，意思是margin: 0 auto 0 auto，因此左右边距为auto，而上下边距为0。 - Joakim Johansson

效果非常好。谢谢。Wayne - Wayne Barron

Answer 2

如果要居中的元素有指定宽度，您可以使用 margin: 0 auto 来进行居中。

- Joakim Johansson