Can I center the map in my design?

When the map is responsive it will fill the space that your web design makes available to it. Given a responsive map, use this embedding code to give the map a width of 50% centering the map within the available space:

<div id="map_grandparent" style="text-align: center;">
  <div id="map_parent" style="width: 50%; display: inline-block;">
    <div id="map"></div>
  </div>
</div>

You might give it a try in your design. You can adjust 50% up or down as you like.

Here's an image showing the result:

where red represents the space available to the map in the webpage design. This is the equivalent of adding a 25% margin to the right and left of the map.

If instead you'd like the space to be used by the map instead, you can do that by changing the map's aspect ratio.