html - 我怎样才能使这个 div 居中对齐？

Question

我有这个页面:

http://fetr.zonedesign.ro/contact/

我有一张 map 和一张蓝色 div 上的 map ，我想在中心显示

这是 HTML 代码:

<div style="float:left;width:100%;padding:0 10%;text-
align:center;margin:10px auto;display:block;">
<div class="date-contact">proba</div>
<?php echo do_shortcode( '[huge_it_maps id="1"]' ); ?>
</div>

这是 CSS 代码:

@media (min-width: 800px) {
.date-contact
{
width:300px;
height:150px;
background:blue;
position:absolute;
z-index:10;
}
}

我尝试使用 margin: 0 auto 但不幸的是没有用。 你能帮我解决这个问题吗？

提前致谢!

Answer 1

如果你想保持其绝对位置，你可以使用 calc 计算顶部/左侧，但你需要知道你的 div 的高度/宽度。

此外，这个蓝框的父级需要是position relative/absolute/or fixed:

here's a demo

<div></div>

div {
    background: blue;
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}