UPDATE: Upon reviewing your site after your edit, I noticed the need for a position: absolute in your .date-contact style. Therefore, the code I originally recommended may not be applicable here. Nevertheless, you can still benefit from the explanations provided.
To start, it's important to note that you cannot use margin: 0 auto with position: absolute. It is also advisable to use classes in a separate CSS file instead of inline styles as this ensures better code organization and adheres to the Don't Repeat Yourself (DRY) principle.
I've revised your code to achieve the desired effect. Take a look and feel free to ask any questions if needed; I'll do my best to assist you.
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%;
}
REVISED ANSWER FOR EDITED QUESTION
While other responses suggest using absolute positioning for the blue div, I believe this approach will not center it as desired. Instead, consider placing the blue div within another div set to position absolute. This way, the blue div will be centered with margin: 0 auto;. Additionally, I have placed the blue div inside div#huge_it_google_map1 as it seems more fitting there.
HTML
<div class="yourMapDiv">
<div class="outer-div" id="huge_it_google_map1">
<div class="date-contact">proba</div>
<!-- Additional divs and map content inside 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 to display your map div (yellow) */
}
.date-contact {
background-color:blue;
width:300px;
/*height:150px;*/
margin: 0 auto;
/* or "margin: 50px auto 0" for a 50px margin-top */
}}
For easy reference, here is a working example.
I hope this helps you achieve your desired outcome.