这两个解决方案只需要两个嵌套的元素。
第一个 - 相对和绝对定位,
如果内容是静态的(手动居中)。
.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);
}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%; left: 0%; right: 0%;
}
https://jsfiddle.net/GlupiJas/5mv3j171/
或者针对流体设计 - 如果需要精确的内容居中,请使用下面的示例:
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/GlupiJas/w3jnjuv0/
如果内容超过窗口高度的50%,则需要设置'min-height'。您还可以使用媒体查询来操作移动设备和平板电脑的高度,但前提是您要进行响应式设计。
我想您可以进一步使用简单的JavaScript / JQuery脚本来操纵min-height或fixed height(如果有必要)。
其次 - 如果内容是流体的,您还可以使用表格和表格单元格CSS属性进行垂直对齐和文本居中:
/*in a wrapper*/
display:table
并且。
display:table-cell;
vertical-align: middle;
text-align: center;
它的工作和规模完美无缺,通常用作响应式网页设计解决方案,使用网格布局和媒体查询来操作对象的宽度。
.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);
}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}
我更喜欢使用表格来实现内容居中,但在某些情况下,相对绝对定位会更好,特别是当我们不想保持内容对齐的精确比例时。
https://jsfiddle.net/GlupiJas/4daf2v36/