我该如何对齐这个div中心？

Question

我有这个页面：

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

我有地图和地图上蓝色的div我想在中心

显示这是代码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

，如果你想保持它的位置绝对可以用计算值顶部/左但你需要知道你的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); 
} 

Answer 2

编辑：我没有意识到你的网站，直到你的编辑。您应该在.date-contact风格中使用position: absolute。所以，我推荐的代码在这里不适用。但是你可以从我希望的解释中受益。

首先，您不能使用margin: 0 auto和position: absolute。在独立的css文件中使用类，而不是使用内联样式，总是可以帮助您清楚地看到代码。有了这种分离的担忧，你也会在代码中应用DRY原理。

我整理了您的代码以提供您想要的效果。请看，如果你有问题，请开火。将尽我所能提供帮助。

HTML

<div class="outer-div"> 
    <div class="date-contact">proba</div> 
</div> 

CSS

.date-contact { 
    width:300px; 
    height:150px; 
    background:blue; 
    margin: 0 auto; 
} 

.outer-div { 
    text-align:center; 
    margin:100px auto; 
    padding:0 10%; 
} 

---

新的答案EDITTED问题

其他的答案说，你应该绝对定位你的蓝格。我说如果你这样做你永远不会让它显示在中心。这样做的简单方法是将你的蓝色div放在绝对定位的另一个div中。你的蓝色div将显示在中心，就像你想要的margin: 0 auto;另外，我把你的蓝色div放在div#huge_it_google_map1里面，因为我相信它是它的所在。

HTML

<div class="yourMapDiv"> 
    <div class="outer-div" id="huge_it_google_map1"> 
    <div class="date-contact">proba</div> 
    <!-- Your other divs and map contents inside the div#huge_it_google_map1 --> 
    </div> 
</div> 

CSS

.yourMapDiv { 
    position: relative; 
    background-color: yellow; 
    padding: 10px; 
} 

.outer-div { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    text-align:center; 
    background-color:red; /* Remove this attribute to see your map div (yellow) */ 
} 

.date-contact { 
    background-color:blue; 
    width:300px; 
    /*height:150px;*/ 
    margin: 0 auto; 
    /* or "margin: 50px auto 0" if you like to give a little margin-top for 50px */ 
}} 

为了您的方便，这是工作fiddle。 我希望你能达到你想要的。

Answer 3

我的建议是： 包装两个div的div＃huge_it_google_map1_container和div.date-与父div联系。父div的宽度将与div＃huge_it_google_map1_container的宽度相同。 因此，HTML是：

<div class="map_parent_wrapper"> 
<div id="huge_it_google_map1_container"></div> 
<div class="date-contact"></div> 
</div> 

CSS的将是如下：

.map_parent_wrapper { 
position:relative 
} 
.date-contact { 
position:absolute; 
top:0; 
left:0; 
bottom:0; 
right:0; 
margin:auto; 
} 

Answer 4

.date-contact { 
    background: none repeat scroll 0 0 blue; 
    clear: both; 
    height: 150px; 
    margin: 0 auto -208px; 
    position: relative; 
    width: 300px; 
    z-index: 10; 
} 

你的蓝格绝对定位，它很难得到一个中心滋养品，

使其相对定位并使用margin 0px auto对齐中心;

现在给-208 PX的阴性切缘底部，使蓝色的div重叠地图。

设置所需的z索引，使得蓝色方块是地图上方。

-Cheers ...！

Answer 5

蓝div有position : absolute。居中的显示，你需要使用左边和顶部：

left: 50% - width block(example 40%) 
top:50% - height block(example 40%)