这两个解决方案只需要两个嵌套元素。
First -如果内容是静态的(手动中心),则相对和绝对定位。
.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%。您还可以使用移动和平板设备的媒体查询来控制此高度。但前提是您使用响应式设计。
我想如果出于某种原因需要,您可以更进一步并使用简单的 JavaScript/JQuery 脚本来操作最小高度或固定高度。
第二-如果内容是流动的,你还可以使用垂直对齐和文本居中对齐的表格和表格单元 css 属性:
/*in a wrapper*/
display:table;
和
/*in the element inside the wrapper*/
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/
我更喜欢精确内容居中的表格解决方案,但在某些情况下,相对绝对定位会做得更好,特别是如果我们不想保持内容对齐的精确比例。