Как центрировать модальное окно в css + html?

Question

Как центрировать вертикальное модальное окно с таким стилем CSS:

.inquiry_form_container {
  left: 50%;
  margin-left: -375px;
  width: 750px;
  top: 150px;
  position: fixed;
  z-index: 10001;
  background: #fff;
  border: 1px solid #cccccc;
  display: block;
  -webkit-box-shadow: 0 0 10px #cccccc;
  -moz-box-shadow: 0 0 10px #cccccc;
  -o-box-shadow: 0 0 10px #cccccc;
  box-shadow: 0 0 10px #cccccc;
}

у него неизвестная высота, как сделать, чтобы это окно было с одинаковыми полями сверху и снизу?

Answer 1

Вы можете иметь правильную идею, используя left:50%, но я бы использовал 2 DIV. Один внутри другого:

Первый DIV будет иметь position:relative, left:50% и width:0px.

Второй DIV (внутри) будет иметь position:absolute, width:200px и left:-100px.

Не уверен, что делать с неизвестной высотой. Как насчет высоты пикселя на втором DIV и использовать overflow-y:scroll?