вертикальное выравнивание - z-index

Question

Я пытаюсь выровнять вертикально модальное поле.Но margin-top:50% не сработал, как я ожидал.В основном, я хочу квадрат с центром в другой квадрат.

Answer 1

Вместо поля необходимо использовать top:325px; для #modal

Answer 2

Добавьте position: relative; в свой контейнер, если вы хотите, чтобы абсолютно позиционированные элементы внутри него были расположены относительно него:

#replace {
  position: relative;
  width: 950px;
  height: 500px;
}

Затем установите верхнее значение элемента, который вы хотите позиционировать. Здесь нужно отметить одну вещь: ваш div #replace является здесь контейнером, но он меньше, чем div #content, поэтому, когда вы позиционируете #modal, вам нужно будет присвоить ему определенные значения в пикселях, чтобы центрировать его по #content. .

Answer 3

Если у вас есть modal внутри content div, не так уж и сложно, вы можете попробовать этот HTML:

<div id = "content">
    <div id="modal"></div>
</div>

... с этим CSS:

#modal {
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}

#content {
    position: absolute;
    width: 550px;
    height: 550px;
    background-color: green;
}

Демо

По сути, вы абсолютно позиционируете дивизион modal внутри дивизиона content и говорите, чтобы он начинался с 50% сверху и 50% слева. Это будет центрировать верхний левый угол modal, но не div в целом. Чтобы центрировать div в целом, вам нужно добавить отрицательное поле, чтобы переместить его вверх и влево. Величина отрицательного поля равна половине высоты / ширины modal div.

Если вы хотите сохранить тот же HTML, вы все равно можете выполнить то же самое, используя эту технику, просто убедитесь, что вы сделали position: relative на вашем replace div, чтобы любые absolute дочерние позиции ly были расположены относительно к этому.