CSS: позиционировать текст в середине страницы - PullRequest
Новая
       23

CSS: позиционировать текст в середине страницы

27 голосов
/ 31 октября 2011

Я бы хотел разместить <h1> в середине страницы любого пользователя.Я искал в Интернете, и все они размещают его в неправильном месте.Спасибо!ОБНОВЛЕНИЕ: я имею в виду вертикальный и горизонтальный!Точно посередине!ТАКЖЕ: на странице есть ничего .

Ответы [ 3 ]

41 голосов
/ 31 октября 2011

Попробуйте этот CSS: 

h1 {
    left: 0;
    line-height: 200px;
    margin-top: -100px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}

jsFiddle: http://jsfiddle.net/wprw3/

26 голосов
/ 16 августа 2016

Вот метод, использующий display:flex: 

.container {
  height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div>centered text!</div>
</div>

Просмотр на Codepen
Проверка совместимости браузера

5 голосов
/ 31 октября 2011

Даже если вы приняли ответ, я хочу опубликовать этот метод.Я использую jQuery для центрирования по вертикали вместо css (хотя оба эти метода работают). Здесь - скрипка, и я в любом случае выложу здесь код.

HTML: 

<h1>Hello world!</h1>

Javascript (jQuery): 

$(document).ready(function(){
  $('h1').css({ 'width':'100%', 'text-align':'center' });
  var h1 = $('h1').height();
  var h = h1/2;
  var w1 = $(window).height();
  var w = w1/2;
  var m = w - h
  $('h1').css("margin-top",m + "px")
});

Это берет высоту области просмотра, делит ее на два, вычитает половину высоты h1 и устанавливает это число равным margin-top h1.Прелесть этого метода в том, что он работает на нескольких строках h1 с.

РЕДАКТИРОВАТЬ: Я изменил его так, чтобы он центрировался при каждом изменении размера окна.

...