Вертикально по центру в окне просмотра с использованием CSS

Question

Я смотрю вертикально по центру <div> в окне просмотра (в окне браузера), не прибегая к Javascript (только для чистого HTML и CSS). У меня есть несколько ограничений:

• div должен быть центрирован вертикально в области просмотра. Методы, которые я видел, поддерживают только центрирование внутри другого <div>, а это не то, что мне нужно.
• Высота div неизвестна.

Другие ограничения:

• div должен быть выровнен вправо.
• div имеет постоянную ширину.
• div должен поддерживать отступ.
• Другие элементы будут размещены на веб-странице. div действует как меню.
• Div должен поддерживать цвет фона / изображение.

Это приближает меня к тому, что я хочу, но не совсем:

#nav {
    position: fixed;
    right: 0;
    top: 50%;
}

Тем не менее, top навигационной панели находится в середине, а не middle nav.

Есть ли какая-то техника, которая позволяет мне центрировать div с этими ограничениями?

Answer 1

Что это? Взять 8 лет , чтобы получить ответ на проблему - это слишком много?

Ну, лучше поздно, чем никогда!

Вы действительно действительно близки к решению. Я бы сделал это с transform: translate():

#nav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

Согласно Можно ли использовать? , он поддерживается всем, кроме IE8 и Opera Mini (что, честно говоря, довольно хорошая поддержка).

Я бы порекомендовал вам немного перебить его и просто добавить все префиксы вендора (просто чтобы убедиться!):

#nav {
    position: fixed;
    right: 0;
    top: 50%;

    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

Вот фрагмент кода, чтобы показать его вам в действии:

#nav {
    right: 0;
    top: 50%;
    position: fixed;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);

    background-color: #ccc;
    padding: 20px;
}

<div id="nav">
    ABC<br/>
    DEFGH<br/>
    IJKLMNO<br/>
    PQRS<br/>
    TUVWXYZ
</div>

Надеюсь, это все еще актуально для вас! (кого я шучу, это было 8 лет )

Answer 2

вы можете использовать это как одно из решений.

   <style>
   #containter {
     height: 100vh; //vh - viewport height
     display: flex;
     flex-direction: column;
     align-items: center; 
     justify-content: center;
   }
   #content {}
  </style>

 <div id="containter">
  <div id="content">
    any text<br>
    any height<br>
    any content, for example generated from DB<br>
    everything is vertically centered
 </div>
</div>

Answer 3

Если для элемента установлено значение position: fixed или position: absolute:

top: 50%; left: 50%; transform: translate(-50%, -50%)

Если для элемента установлено значение position: relative, используйте:

margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%)

(Более подробная информация на источник .)

---

Пример:

Запустите фрагмент и измените размер этой страницы (или поверните устройство). Поле остается по центру в «окне просмотра фрагмента».

.myContainer {  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid RebeccaPurple;
}

.myThing {
  width: 100px;
  height: 100px;
  background-color: CornflowerBlue;
}

<div class="myContainer">
  <div class="myThing myContents">
  </div>
</div>

Answer 4

Самый простой способ - не использовать div - используйте table с одной строкой и одной ячейкой. Вертикальное выравнивание крайне не поддерживается в CSS, и вы обнаружите, что выполняете кодирование стены и потолка, чтобы выполнить это.

Я понимаю семантический аргумент против того, что я только что предложил - я сторонник семантической разметки в большинстве случаев. Однако я также верю в использование правильного инструмента для правильной работы. Я считаю, что в этом случае лучше пожертвовать небольшой чистотой ради простого решения, которое будет работать.