центр div внутри фиксированного в центре экрана

Question

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

#menu{ 
    position:fixed; 
    width:100%; 
    height:30px; 
    background:#000; 
} 

#center{ 
position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
    background:#fff; 
} 

..

<div id="menu"> 

<div id="center"> 
how to center this div? 
</div> 

</div> 

, если изменить положение #menu к относительному он работает отлично ... но мне нужно, чтобы это было исправлено. в чем проблема, что я не могу поставить div #center посередине?

https://jsfiddle.net/y5s77mmq/1/

спасибо друзьям!

Answer 1

Есть два способа добиться этого. Одним из них является, чтобы дать вашим #center Div в fixed положения:

#center { 
    position:fixed; /* change this to fixed */ 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
    background:#fff; 
} 

Однако, это будет держать его в центр на экран и не страницы.

Если вы хотите отцентрировать его по вертикали и по горизонтали на веб-странице, один из вариантов является использование flex:

#container { 
 
    display: flex; 
 
    /* establish flex container */ 
 
    flex-direction: column; 
 
    /* make main-axis vertical */ 
 
    justify-content: center; 
 
    /* align items vertically, in this case */ 
 
    align-items: center; 
 
    /* align items horizontally, in this case */ 
 
    height: 500px; 
 
    /* for demo purposes */ 
 
    border: 1px solid black; 
 
    /* for demo purposes */ 
 
    background-color: #eee; 
 
    /* for demo purposes */ 
 
} 
 

 
.box { 
 
    width: 300px; 
 
    margin: 5px; 
 
    text-align: center; 
 
} 
 

 
#center { 
 
    background: #fff; 
 
    width:100px; 
 
    height:100px; 
 
}

<div id="container"> 
 
    <!-- flex container --> 
 

 
    <div id="center" class="box"> 
 
    how to center this div? 
 
    </div> 
 

 
</div>

Кроме того, поскольку #center ДИВ не связана с вашей #menu div, он не должен быть вложенным.

Answer 2

position до fixed в #center. См. JSFiddle.

Answer 3

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Глядя на ваши прошлые вопросы, похоже, что вы знаете достаточно о css, поэтому вам, вероятно, не нужно такое длинное объяснение, но я объяснил все на всякий случай, если кто-то другой менее осведомлен о css находит этот ответ.

Решение flex, упомянутое в @DrewKennedy, является лучшим, но если вы не можете использовать flex по какой-либо причине, вот еще одно решение, аналогичное первому решению DrewKennedy. Это решение использует абсолютное позиционирование, поэтому оно сосредоточено на странице, но его можно изменить на фиксированное, чтобы получить тот же эффект, что и другой ответ.

Основная идея почти такая же. Когда вы установите его на абсолютное/фиксированное позиционирование, вы можете установить его на половину ширины и высоты экрана сверху и слева. Это может означать, что контент будет начинаться только посередине, поэтому он не будет центрирован, поэтому в ответе Дрю Кеннеди он убирает половину ширины и высоту элемента с полей, чтобы исправить это.

Однако это решение использует преобразование перевода для его перемещения. Когда вы используете трансформацию с процентом, она перемещает элемент относительно его собственного размера. Это означает, что вы можете использовать его для вещей с динамическим размером. This example имеет полный абзац и вертикально центрирован. Когда вы используете то же самое css, но имеете только одно слово внутри div, оно равно also still vertically centred..

Вот соответствующий CSS & HTML:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #050505; 
 
} 
 
.middle-align { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /* Works with dynamically sized things too! */ 
 
    max-width: 700px; 
 
    min-width: 100px; 
 
    /* Pointless styles to make it look nice: */ 
 
    font-family: 'Times New Roman', serif; 
 
    background-color: #ddd; 
 
    padding: 50px; 
 
    outline: 2px solid rgba(0, 0, 0, 0.2); 
 
    outline-offset: -25px; 
 
}

<div class="middle-align"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra fermentum metus sit amet consectetur. Integer dolor purus, pretium at arcu ac, ornare interdum lacus. Cras diam nibh, fringilla sed elementum quis, varius vitae enim. Nunc nec orci 
 
    imperdiet, malesuada nunc vitae, lobortis lacus. Donec et magna ornare, facilisis urna et, hendrerit massa. Aenean vitae convallis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi quis convallis 
 
    tellus. Maecenas a lorem ac turpis malesuada aliquam et sit amet sem. Nullam eu neque mi. Pellentesque ac ullamcorper felis, a mollis arcu. Vestibulum at dui congue, euismod tortor at, auctor est. Pellentesque faucibus dui nec dui hendrerit vestibulum. 
 
</div>