verticalmente - centrar texto horizontalmente css




¿Cómo centrar verticalmente un div para todos los navegadores? (20)

Quiero centrar un div verticalmente con CSS. No quiero tablas o JavaScript, sino solo CSS puro. Encontré algunas soluciones, pero a todas les falta el soporte de Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

¿Cómo puedo centrar una div verticalmente en todos los navegadores principales, incluido Internet Explorer 6?


Centrado solo verticalmente

Si no te importa Internet Explorer 6 y 7, puedes usar una técnica que involucre dos contenedores.

El contenedor exterior:

  • debe tener display: table;

El contenedor interior:

  • debe tener display: table-cell;
  • debe tener vertical-align: middle;

El cuadro de contenido:

  • debe tener display: inline-block;

¡Puedes agregar cualquier contenido que desees al cuadro de contenido sin importar su ancho o alto!

Manifestación:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Véase también este violín !

Centrado horizontal y verticalmente.

Si desea centrar tanto horizontal como verticalmente, también necesita lo siguiente.

El contenedor interior:

  • debe tener text-align: center;

El cuadro de contenido:

  • debe reajustar la alineación horizontal del texto para, por ejemplo text-align: left; o text-align: right; , a menos que quieras que el texto esté centrado

Manifestación:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Véase también este violín !


Solución flexbox

Notas
1. El elemento padre recibe el nombre de la clase.
2. Agregue prefijos de proveedores flexibles si los navegadores compatibles lo requieren.

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>



Ahora la solución flexbox es una forma muy fácil para los navegadores modernos, por lo que te recomiendo esto:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>


Creo que este es el más útil ... proporciona el diseño 'H' más preciso y es muy sencillo de entender.

El beneficio en este marcado es que define el tamaño de su contenido en un solo lugar -> "Contenido de la página".
Los colores del fondo de la página y sus márgenes horizontales se definen en sus divs correspondientes.

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

Y aquí con CSS separado:

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

Creo que una solución sólida para todos los navegadores sin usar flexbox - "align-items: center"; es una combinación de display: table y vertical-align: middle ;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/


Después de mucha investigación, finalmente encontré la solución definitiva. Funciona incluso para elementos flotantes. Ver fuente

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}


Especialmente para divs padres con altura relativa (desconocida), el centrado en la solución desconocida funciona muy bien para mí. Hay algunos ejemplos de código realmente buenos en el artículo.

Fue probado en Chrome, Firefox, Opera e Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>


Esta solución funcionó para mí si tiene un elemento de bloque (por ejemplo). Utilicé los colores para aclarar la solución.

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

Demostración del código JSFiddle


La forma más sencilla serían las siguientes 3 líneas de CSS:

position: relative;
top: 50%;
transform: translateY(-50%);

A continuación se muestra un ejemplo:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>


La respuesta de Billbad solo funciona con un ancho fijo de la div .inner . Esta solución funciona para un ancho dinámico al agregar el atributo text-align: center al .outer div.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>


Las tres líneas de código que utilizan la transform funcionan prácticamente en los navegadores modernos e Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Estoy agregando esta respuesta ya que encontré algo incompleto en la versión anterior de esta respuesta (y no me permitirá simplemente comentar).

  1. el "relativo" de la posición desordena el estilo si el div actual está en el cuerpo y no tiene un contenedor div. Sin embargo, 'arreglado' parece funcionar, pero obviamente corrige el contenido en el centro de la ventana gráfica

  2. También utilicé este estilo para centrar algunos divs superpuestos y descubrí que en Mozilla todos los elementos dentro de este div transformado habían perdido sus bordes inferiores. Posiblemente un problema de renderizado. Pero agregar solo el relleno mínimo a algunos de ellos lo representó correctamente. Chrome e Internet Explorer (sorprendentemente) renderizaron las cajas sin necesidad de relleno


Lo hice con esto (cambio ancho, alto, margen superior y margen izquierdo en consecuencia):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

Los contenidos se pueden centrar fácilmente utilizando flexbox. El siguiente código muestra el CSS para el contenedor dentro del cual se debe centrar el contenido:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

No responde por la compatibilidad del navegador, pero también menciona la nueva cuadrícula y la no tan nueva función de Flexbox.

Cuadrícula

De: Mozilla - Documentación de cuadrícula - Alinear verticalmente

Soporte del navegador: Grid Browser Support

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Soporte del navegador: Soporte del navegador Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Si alguien se preocupa solo por Internet Explorer 10 (y posterior), use flexbox :

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Soporte de Flexbox: http://caniuse.com/flexbox


Solo hazlo: agrega la clase a tu div :

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

Y lea este artículo para una explicación. Nota: La Height es necesaria.


Una más que no puedo ver en la lista:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Navegador cruzado (incluido Internet Explorer 8 - Internet Explorer 10 sin hacks)
  • Responde con porcentajes y min- / max-
  • Centrado independientemente del relleno (sin tamaño de caja)
  • height debe ser declarada (ver Altura Variable )
  • Configuración recomendada de overflow: auto para evitar la propagación de contenido (ver Desbordamiento)

Fuente: Absoluto horizontal y vertical centrado en CSS


Yo uso esto. Funciona en Internet Explorer 8 y versiones posteriores:

height:268px - para display:table actúa como min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>




centering