本文介绍了如何利用CSS将内容垂直居中于一个具有固定高度的容器内。重点讲解了.display:table-cell;和.vertical-align:middle;的组合使用，以及.content元素需设置.display:inline-block;以实现文本水平居中。这种方法适用于需要跨浏览器兼容性的垂直居中解决方案。
这是一个很好的起点。
HTML：
CSS：
.containing-table {
display: table;
width: 100%;
height: 400px; /* for demo only */
border: 1px dotted blue;
}
.centre-align {
padding: 10px;
border: 1px dashed gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top; /* Removes the extra white space below the baseline */
}
.containing-table为.centre-align(表格单元格)建立宽度和高度上下文。
您可以根据需要应用text-align和vertical-align来改变.centre-align。
请注意，.content需要使用display：inline-block，如果要使用text-align属性水平居中。
扫一扫
5001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
