Почему это сверху: 50% в css не работает?

Question

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

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

и мой HTML это одно свойство div

Answer 1

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; 

Answer 2

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

Answer 3

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

#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/

EDIT

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

Full View | Code View

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

Full View| Code View

Answer 4

Я хотел бы воспользоваться этой возможностью, чтобы нагло себя продвигать my answer to another question here on SO :)

Это, как говорится, CSS свойство «сверху» получает правильно рассчитывается на основе высоты контейнерного элемента - эффективно оказанием целевого элемента ниже средней линии. Это означает, что элемент нужно подталкивать наполовину вверх, как объясняется в связанном вопросе.

К сожалению, такая, казалось бы, простая задача не может быть достигнуто путем корректировки верхнего поля и т.д., без использования абсолютных пиксельных значений (+1 для ответа Kristian Antonsen «s) - можно было бы представить себе установление маржи-топ в«-50 %»будет означать только то, но в соответствии с CSS спецификации, значение маржи даже на вертикальной оси рассчитывается как a percentage always relative to the width of the containing block

Answer 5

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

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

к центру.

Answer 6

Если вы не знаете размер, что вы работаете, я нашел изящное решение:

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

(прокрутите вниз до последнего бита кода на странице)

Answer 7

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

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

<i>center</i>

Answer 8

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

Для вертикального центрирования чего-либо. I prefer to use this method

Использование 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%); 

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

You can refer here for vendor prefixes.

---

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

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

$('.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>

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

2. Вы можете поцарапать идеи выше и вместо этого использовать центрирование с помощью display: table. CSS-Tricks has a very good example here.