Как разместить наложение фиксированного div в центр с помощью css?

У меня есть div, который появляется после того, как я нажал какое-либо действие на другой элемент веб-сайта. Это фиксированный div, который появляется поверх всех div, и фон затемнен. Мне нужно убедиться, что этот div расположен в центре и остается в центре, даже если окно изменено.Как разместить наложение фиксированного div в центр с помощью css?

Я пробовал left, margin-left:50% трюк, но это не делает работу.

Вот мой код:

<div class="overlay-box">Some content</div>

CSS

.overlay-box { 
background-color:#fff; 
     width:550px; 
left:50%; 
    margin-left:-275px; 
position:fixed; 
text-align:center; 
border:1px solid #000; 
}

Это не позиция в центре, и при изменении размера он имеет больший запас по отношению к левой, чем правой. Как это исправить? Есть ли волшебный трюк, например margin:0px auto для фиксированных divs?

источник

2016-03-14 Anonymous

Возможный дубликат [Горизонтально центрирования DIV в другой DIV с шириной: 100%] (http://stackoverflow.com/ вопросы/114543/horizontally-center-a-div-in-another-div-with-width-100) –

Скрытые Гоббы, делает ** «Как разместить наложение фиксированного div в центр с помощью css?» ** выглядеть так же, как и ** «Горизонтально центрировать div в другом div с шириной: 100%» **? –

В связанном вопросе есть методы, которые являются жизнеспособными в этом случае (например, http://stackoverflow.com/a/29011864/3400962). Лично я не вижу, что не так с кодом, который вы указали https://jsfiddle.net/zfd0Ltxn/1/. –

Поместите div внутри другого div, который составляет 100% ширину и центр выравнивания текста. Также установите .overlay ящик {маржа: авто}

.container-box { 
    background-color:#000; 
    width:100%; 
    height: 100%; 
    text-align:center; 
} 
.overlay-box { 
    background-color:#fff; 
    width:300px; 
    margin: auto; 
} 


<div class="container-box"> 
    <div class="overlay-box">Some content</div> 
</div>

Рабочая JSFiddle: https://jsfiddle.net/5kkdaqe6/

источник

2016-03-14 14:33:11 Mario

Вы можете установить сверху, справа, снизу, слева от 0 до края для авто вертикально и горизонтально центр Выравнивание фиксированной дела. Но это будет работать, только если вы установите высоту div с помощью CSS.

.overlay-box { 
    background-color: #fff; 
    border: 1px solid #000; 
    text-align:center; 
    height: 200px;/*height needs to be set*/ 
    width: 550px; 
    margin: auto; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

Если вы не можете установить высоту, то рекомендуется использовать гибкий макет https://css-tricks.com/snippets/css/a-guide-to-flexbox/

источник

2016-03-14 16:42:19

Я до сих пор нахожу это смехотворным, что с CSS очень много, чтобы делать простые, простые вещи. – Epirocks

Как разместить наложение фиксированного div в центр с помощью css?

ответ

Смежные вопросы