Search code examples
htmlcsspositioningcenter

centering a google maps iframe

Hi im not really familiar with CSS, however i need a google maps to be centered on my page, my current code dont work the way i want it. :S

here is my html

<div class="maps">
<iframe src="https://www.google.com/maps/d/embed?mid=zZVPDX7DZETc.kFjAmXvee3Zc" width="512" height="384"></iframe>
</div>

and here is my css

.maps {
position: absolute;
    top: 50%;
    left: 35%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

what am i doing wrong? i also tried with margin-right/left: auto; that did not work.

Solution

  • There are typically two ways of centring an element, if it is display:block then you can margin-right:auto;margin-left:auto; as long as it has a width set. If it is display:inline then you can use text-align:center on its parent