CSS 布局
CSS水平,垂直居中的11个场景
如果你想从上到下依次居中几个块级元素,那么仍然可以使用 margin: 0 auto; 来实现。
源代码:
点击运行 »
<style> .parent-4 { background: green; padding: 10px; } .parent-4 div { background: black; margin: 0 auto; /* 使自身水平居中 */ color: white; padding: 15px; margin: 5px auto; } .parent-4 div:nth-child(1) { width: 200px; /* 需要设置宽度才能水平居中 */ } .parent-4 div:nth-child(2) { width: 400px; } .parent-4 div:nth-child(3) { width: 125px; } </style> <div class="parent-4"> <div> 我是一个inline-block元素,我和我的同胞节点在同一列水平居中。 </div> <div> 我是一个inline-block元素,我和我的同胞节点在同一列水平居中。我有着更多的内容。 </div> <div> 我是一个inline-block元素,我和我的同胞节点在同一列水平居中。 </div> </div>
运行结果:
点击运行 »