Center Google Form with CSS

Question

I embedded a google form on my site, which is wrapped inside a div. I try to center it with CSS, but it doesn't work. Is there a way to accomplish this task?

My code:

#googleForm {
	margin-left: auto;
	margin-right: auto;
}

<div id="googleForm">	
  <iframe src="https://docs.google.com/forms....></iframe>
</div>

Answer 1

You can add text-align: center to element with id googleForm. Also you can safely remove margin-left and margin-right:

#googleForm {
  /*margin-left: auto;/*
  /*margin-right: auto;*/
  text-align: center;
}

<div id="googleForm">
  <iframe src="https://docs.google.com/forms....></iframe>
</div>

If you want to use margin: 0 auto you have to set the width of the element:

#googleForm {
  width: 304px;
  margin: 0 auto;
}

<div id="googleForm">
  <iframe src="https://docs.google.com/forms....></iframe>
</div>