Подтвердить что ты не робот

Вертикальное и горизонтальное выравнивание (среднее и среднее) с помощью css

Я практикую CSS, и я настолько смущен, что могу заставить мой элемент div быть центром (по вертикали и горизонтали) на моей странице (означать, каким способом или способами для совместимости с браузером)?

С уважением!

4b9b3361

ОТВЕТЫ

Ответ 1

Существует много методов:

  • Центральное горизонтальное и вертикальное выравнивание элемента с фиксированной длиной.

CSS

 <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>

2. Центрировать по горизонтали и вертикали одну строку текста

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>

3. Центральное горизонтальное и вертикальное выравнивание элемента без какой-либо конкретной меры.

CSS

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>

Подробнее здесь: Горизонтальное и вертикальное выравнивание в CSS

Ответ 2

Это сообщение в блоге описывает два метода центрирования div как по горизонтали, так и по вертикали. Один использует только CSS и будет работать с div, которые имеют фиксированный размер; другой использует jQuery и будет работать с div, для которых вы не знаете размер заранее.

Я дублировал примеры CSS и jQuery из демо-версии блога:

CSS

Предполагая, что у вас есть div с классом .classname, css ниже должен работать.

left:50%; top:50%; устанавливает верхний левый угол div в центр экрана; margin:-75px 0 0 -135px; перемещает его влево и вверх на половину ширины и высоты div фиксированного размера соответственно.

.className{
    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;
}

JQuery

$(document).ready(function(){
    $(window).resize(function(){
        $('.className').css({
            position:'absolute',
            left: ($(window).width() - $('.className').outerWidth())/2,
            top: ($(window).height() - $('.className').outerHeight())/2
        });
    });
    // To initially run the function:
    $(window).resize();
});

Здесь демонстрация методов на практике.

Ответ 4

Это не так легко сделать, как можно было бы ожидать - вы действительно можете сделать только вертикальное выравнивание, если знаете высоту своего контейнера. ЕСЛИ это так, вы можете сделать это с абсолютным позиционированием.

Концепция состоит в том, чтобы установить верхние/левые позиции на 50%, а затем использовать отрицательные поля (установить половину высоты/ширины), чтобы вернуть контейнер обратно в центр.

Пример: http://jsbin.com/ipawe/edit

Основной CSS:

#mydiv { 
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 700px;
    margin-top: -200px; /* -(1/2 height) */
    margin-left: -350px; /* -(1/2 width) */
  }