一、前言
最近写前端,为了不至于让界面出锅需要写禁用JavaScript时的提示框,就发现界面设计很适合使用那种屏幕居中显示的提示信息。同时由于需要自适应文本内容,最终使用纯CSS实现了效果。
二、实现
首先我们需要实现一个自适应内容的容器并通过position: fixed将其屏幕居中。但是此时的居中并非完全居中(容器会偏右且偏下)。
因此还需要再放置一个子元素,使其通过position: relative将位置偏移父元素的一半,并在该元素中处理实际的信息框样式。
.msg-container {
z-index: 12;
position: fixed;
left: 50%;
bottom: 50%;
}
.msg-bar {
z-index: 12;
padding: 1em;
font-size: 24px;
border-radius: 5rem;
background-color: rgba(0,0,0,0.35);
position: relative;
left: -50%;
top: -50%;
}