Почему is top: 50% в css не работает?

Я создаю веб-сайт, и я пытаюсь вертикально сосредоточиться:

 position: absolute;
 width:1200px;
 height:600px;
 top: 50%;
 left: 50%;
 margin-left: -600px;

а мой HTML - это один div

Ответы

Ответ 1

Я думаю, что это должно быть полезно:)

i{
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
<i>center</i>

Ответ 2

Свойство CSS top работает точно как left. Он толкает div с этого направления. Когда вы пишете top:50%, div будет нажата на 50% сверху. Вы хотите, чтобы он был центрирован по вертикали, поэтому вам нужно противостоять этому, потянув его назад. Это можно сделать, используя margin-top: -300px так же, как вы использовали margin-left: -600px, чтобы вытащить его.

position: absolute;
width: 1200px;
height: 600px;
top: 50%;
margin-top: -300px;
left: 50%;
margin-left: -600px;

Ответ 3

Чтобы ответить на ваш вопрос, почему top: 50% не работает, когда вы используете свойство top для элемента, родительский элемент этого элемента должен иметь установленную статическую высоту. Это должно быть в px или единица, отличная от процента. Если вам действительно нужно использовать проценты в своем родителе, тогда вы можете перейти к следующему родительскому элементу (который является родительским элементом этого родителя) и иметь фиксированную статическую высоту.

Чтобы вертикально центрировать что угодно. Я предпочитаю использовать этот метод

Использование CSS transform, так как вам не нужно знать, какова ширина высоты вашего элемента.

position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Не забудьте добавить префиксы браузера/поставщика.

Вы можете обратиться к префиксам поставщиков.

Если вы не знаете высоту своего родителя. У вас есть два варианта:

  • Используя JavaScript, сделайте естественную высоту родительского элемента, а затем установите для свойства height этого родительского элемента значение, которое вы только что использовали. Этот метод можно использовать, когда высота родительского элемента вызвана другим дочерним элементом, который является дочерним элементом, который вы центрируете.

$('.parent').height( $(this).height() );
.parent {
  /* Unkown height */
}

.child {
  /* Create columns */
  width: 50%;
  float: left;
}

.child-1 {
  position: relative;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Example Start -->
<div class="parent">
  <div class="child child-1">
    Lorem ipsum
  </div>  
  <div class="child child-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Ответ 4

top:50%; отлично работает, но не будет "центрировать" элемент, он поместит верхний край на 50% высоты страницы сверху. Аналогично тому, как у вас есть margin-left:-600px;, вы также должны добавить margin-top:-300px;

Ответ 5

Я считаю, что это может несколько подражать ответу, который дал Кристиан, но здесь мои два цента, которые включают использование процентов, а также демонстрируют один внутри другого:

#parent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 60px;
    margin: -60px 0 0 -30px;
    background: blue;
}
#center {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    margin: -12.5% 0 0 -25%;
    background: green;
}

http://jsfiddle.net/userdude/MYD27/

ИЗМЕНИТЬ

Если посмотреть дальше, я думаю, что вы можете столкнуться с проблемами, если пытаетесь сделать это с помощью элемента, не являющегося контейнером в позиционированном элементе. Например:

Полный просмотр | Просмотр кода

Я не думаю, что работает так, как вы планировали. Когда я добавляю position: relative (или, альтернативно, position: absolute), он работает так, как вы предполагали:

Полный просмотр | Просмотр кода

Ответ 6

Я хотел бы воспользоваться этой возможностью, чтобы явным образом рекламировать мой ответ на другой вопрос здесь на SO:)

При этом свойство css "top" корректно вычисляется на основе высоты элемента контейнера, эффективно отображая целевой элемент ниже средней линии. Это означает, что элемент нужно подталкивать наполовину вверх, как объяснено в связанном вопросе.

К сожалению, такая, казалось бы, простая задача не может быть достигнута путем корректировки верхнего поля и т.д. без использования абсолютных значений на основе пикселей (+1 для ответа Кристиана Антонсена) - можно было бы предположить, что параметр margin-top для "-50%" будет означать именно это, но, согласно спецификации css, значения маржи даже на вертикальной оси рассчитываются как процент всегда относительно ширины содержащий блок

Ответ 7

Вы можете использовать

calc(%50 - (items_height/2));

к центру.