CSS 布局
CSS水平,垂直居中的11个场景
如果使用 table 也没有效果,那么可以试下 flex。在 flex 中,一个子元素可以轻易地在父元素中居中。
源代码:
点击运行 »
<style> .parent-8 { background: green; width: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 200px; resize: vertical; overflow: auto; } .parent-8 p { background: black; color: white; margin: 0; padding: 20px; } </style> <div class="parent-8"> <p>多行文本在flexbox容器中垂直居中。</p> </div>
运行结果:
点击运行 »