[分享]css中对话框居中

CSS中的对话框，指的是弹出窗口，通常用于提示消息、警告、确认等方面。对于这种对话框，最重要的是样式的美观，并且应该居中显示。下面我们来看一下如何用CSS实现这种效果。/ 对话框的样式 / .dial...

CSS中的对话框，指的是弹出窗口，通常用于提示消息、警告、确认等方面。对于这种对话框，最重要的是样式的美观，并且应该居中显示。下面我们来看一下如何用CSS实现这种效果。

/* 对话框的样式 */
.dialog {
   position: fixed; /* 固定定位，窗口随着滚动而移动 */
   top: 50%; /* 距离顶部50% */
   left: 50%; /* 距离左侧50% */
   transform: translate(-50%, -50%); /* 平移，使其居中 */
}

/* 黑色幕布的样式 */
.mask {
   position: fixed; /* 固定定位 */
   background-color: rgba(0,0,0,0.3); /* 半透明黑色 */
   top: 0px; /* 距离顶部0px */
   left: 0px; /* 距离左侧0px */
   width: 100%; /* 宽度为100% */
   height: 100%; /* 高度为100% */
} 

从上面的代码可以看出，对话框的样式中，我们将其固定位置，并且将其距离顶部和左侧都设置为50%。但是这时候，对话框只是处于屏幕中央的对角线上，还需要将其平移。通过transform属性，我们可以将其向上和向左平移50%的宽度和高度，从而实现了居中的效果。

在对话框的下面，我们需要加上一个黑色的遮罩层，遮住其它的元素。这个遮罩层的样式中，也是固定定位，并且设置了宽度和高度为100%。它的背景颜色是半透明的黑色，这样对话框就会更加显眼。

最后，我们可以在HTML中这样使用对话框：

<div class="mask">
   <div class="dialog">
       <p>这是一段内容</p>
   </div>
</div> 

通过这种方式，我们就可以实现一个简单的CSS对话框居中的效果。