justificar - CSS: Posiciona el texto en el centro de la página.

como se alinea a la derecha en html

Question

Me gustaría colocar un <h1> en el centro de la página de cualquier usuario. He estado buscando en Internet y todos ellos lo colocan en el lugar incorrecto. ¡Gracias!

ACTUALIZACIÓN: me refiero a vertical y horizontal! En el medio exacto!
TAMBIÉN: No hay nada más en la página.

Answer 1

Aquí hay un método usando 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>

Ver en Codepen
Compruebe la compatibilidad del navegador

Answer 2

Aunque hayas aceptado una respuesta, quiero publicar este método. Uso jQuery para centrarlo verticalmente en lugar de css (aunque ambos métodos funcionan). Here hay un violín, y de todos modos publicaré el código aquí.

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")
});

Esto toma la altura de la ventana gráfica, la divide por dos, resta la mitad de la altura de la h1 y establece ese número en la margin-top del margin-top de la h1. La belleza de este método es que funciona en h1 s de líneas múltiples.

EDITAR: Lo modifiqué para que se centrase cada vez que se cambia el tamaño de la ventana.

Answer 3

Prueba este CSS:

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

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