How can I align center this div? - html

Question

I have this page:
http://fetr.zonedesign.ro/contact/
I have a map and a map over blue div I would like to display at center
This is code 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>
This is code CSS:
#media (min-width: 800px) {
.date-contact
{
width:300px;
height:150px;
background:blue;
position:absolute;
z-index:10;
}
}
I tried to use margin: 0 auto but unfortunately not working.
Can you please help me solve this problem?
Thanks in advance!

Answer 1

if you want to keep its position absolute you can use calc for top/left but you need to know the height/width of your div.
Further, the parent of this blue box needs to be 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

My suggestion is :
wrap the two div's div#huge_it_google_map1_container and div.date-contact with a parent div. The parent div's width will be same as that of div#huge_it_google_map1_container.
So, the html will be:
<div class="map_parent_wrapper">
<div id="huge_it_google_map1_container"></div>
<div class="date-contact"></div>
</div>
The css will be as follows:
.map_parent_wrapper {
position:relative
}
.date-contact {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}

Answer 3

.date-contact {
background: none repeat scroll 0 0 blue;
clear: both;
height: 150px;
margin: 0 auto -208px;
position: relative;
width: 300px;
z-index: 10;
}
Your Blue div is absolutely positioned so its hard to get a center aliment,
Make it relatively positioned and align center using margin 0px auto;
Now give a negative margin bottom of -208 px so that the blue div overlaps the map.
Set the required z-index so that the blue box is above the map.
-Cheers...!!

Answer 4

EDIT: I didn't realize you site until your edit. You should go for a position: absolute in your .date-contact style. So, my recommended code won't apply here. But you can benefit the explanations I hope.
First of all, you cannot use margin: 0 auto with position: absolute. And using classes in a seperated css file, instead of using inline styles, always help you to see your code clearly. With this seperation of concerns, you'll also be applying the DRY principle in your code.
I tidied up your code to provide your desired effect. Please see and if you'll have questions, fire away. Will try my best to help.
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%;
}
NEW ANSWER FOR EDITTED QUESTION
The other answers say that you should absolutely position your blue div. I say if you do that you'll never make it show in the center. The easy way of doing this, is to place your blue div in another div which is positioned absolute. Your blue div will show in center just like you wanted with margin: 0 auto; Also, I placed your blue div inside the div#huge_it_google_map1 because I believe it's where it belongs.
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 */
}}
For your convenience, this is the working fiddle.
I hope you achieve what you wanted.

Answer 5

Blue div has position : absolute. For centered displaying you need to use left and top:
left: 50% - width block( example 40%)
top:50% - height block( example 40%)