Question

如何使遮罩div中的中心div对齐中心？

样式：

<style type="text/css">
    .mask {
        position: absolute; top: 0px;
        filter: alpha(opacity=60);
        background-color: #777;
        z-index: 1002; left: 0px;
        opacity:0.5; -moz-opacity:0.5;
        width: 100%;
        height: 100%;
    }

    .center {
        margin-left: auto;
        margin-right: auto;
    }

</style>

html：

<div id="mask" class="mask">
    <div class="center">MASC</div>
</div>

如何使遮罩div中的中心div对齐中心？

我创建了一个阴影层，其中有一个div，我希望div对齐中心，但是我的样式代码似乎不起作用。

Answer 1

让我们尝试将位置属性设置为固定值。

.mask {
       position: absolute; top: 0px;
       filter: alpha(opacity=60);
       background-color: #777;
       z-index: 1002; left: 0px;
       opacity:0.5; -moz-opacity:0.5;
       width: 100%;
       height: 100%;
}

.center {
        position: fixed;
        top: 50%;
        left: 50%;
}

Answer 2

将样式text-align: center添加到中心区域。

<style type="text/css">.mask {
  position: absolute;
  top: 0px;
  filter: alpha(opacity=60);
  background-color: #777;
  z-index: 1002;
  left: 0px;
  opacity: 0.5;
  -moz-opacity: 0.5;
  width: 100%;
  height: 100%;
}

.center {
  text-align: center;
}

</style>

Answer 3

是的，您应该指定.center格的宽度。

.center {
   margin-left: auto;
   margin-right: auto;
   width: 100px;
}

要使文本居中，您可以将居中对齐

.center {
   text-align:center;
}

Answer 4

这里有两个不错的选择：

1。使用表格布局

.mask{
  display:table;
}
.center{
  display:table-cell;
}

2。使用Flex布局

.mask{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}

如何使遮罩div中的中心div对齐中心？

4 个答案: