这是一个很好的起点。

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属性水平居中。