CSS 布局
CSS水平,垂直居中的11个场景
如果因为一些原因不能使用padding,而且已知文本是不会换行的,那还可以使用 height 和 line-height 来垂直居中文本。
源代码:
点击运行 »
<style> .parent-6, .parent-6 > div { box-sizing: border-box; } .parent-6 { background: green; padding: 40px; } .parent-6 div { background: black; color: white; height: 100px; line-height: 100px; /* 设置和height一样高的line-height */ padding: 0 20px; white-space: nowrap; } </style> <div class="parent-6"> <div> 这行文字是垂直居中的。 </div> </div>
运行结果:
点击运行 »