html - vertical - ¿Cómo centrar horizontalmente un<div>?

centrar un div

Question

¿Cómo puedo centrar horizontalmente un <div> dentro de otro <div> usando CSS?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Answer 1

Alineación de texto: centro

Aplicando text-align: center los contenidos en línea se centran dentro del cuadro de línea. Sin embargo, como el div interno tiene un width: 100% predeterminado width: 100% , debe establecer un ancho específico o usar uno de los siguientes:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Margen: 0 auto

Usar margin: 0 auto es otra opción y es más adecuado para la compatibilidad de navegadores antiguos. Trabaja en conjunto con display: table .

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

display: flex comporta como un elemento de bloque y presenta su contenido de acuerdo con el modelo flexbox. Funciona con justify-content: center .

Tenga en cuenta: Flexbox es compatible con la mayoría de los navegadores, pero no con todos. Consulte here completa y actualizada de compatibilidad de navegadores.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Transformar

transform: translate permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándolo, los elementos se pueden traducir, rotar, escalar y sesgar. Para centrar horizontalmente se requiere position: absolute e left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (Desaprobado)

La etiqueta <center> es la alternativa HTML a text-align: center . Funciona en navegadores más antiguos y en la mayoría de los nuevos, pero no se considera una buena práctica ya que esta función está obsolete y se ha eliminado de los estándares web.

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Answer 2

Centrado solo horizontalmente

En mi experiencia, la mejor manera de centrar una caja horizontalmente es aplicar las siguientes propiedades:

El contenedor:

• debe tener text-align: center;

El cuadro de contenido:

• debe tener display: inline-block;

Manifestación:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Véase también este violín !

Centrado tanto horizontal como verticalmente.

En mi experiencia, la mejor manera de centrar una caja tanto vertical como horizontalmente es usar un contenedor adicional y aplicar las siguientes propiedades:

El contenedor exterior:

• debe tener display: table;

El contenedor interior:

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

El cuadro de contenido:

• debe tener display: inline-block;

Manifestación:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

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

.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">
      Center this!
    </div>
  </div>
</div>

Véase también este violín !

Answer 3

Centrando un div de altura y anchura desconocidas.

Horizontal y verticalmente. Funciona con navegadores razonablemente modernos (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.)

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

<div class="content">This works with any content</div>

Tinker con él más adelante en Codepen o en JSBin .

Answer 4

Algunos carteles han mencionado la forma de centrar CSS 3 usando display:box .

Esta sintaxis está desactualizada y no debe usarse más. [Véase también este post] .

Así que, para completar, aquí está la última forma de centrarse en CSS 3 utilizando el Módulo de diseño de caja flexible .

Así que si tienes un marcado simple como:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... y desea centrar sus elementos dentro del cuadro, esto es lo que necesita en el elemento primario (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Si necesita admitir navegadores más antiguos que usan sintaxis anterior para flexbox, here''s un buen lugar para buscar.

Answer 5

Bueno, logré encontrar una solución que quizás se ajuste a todas las situaciones, pero usa JavaScript:

Aquí está la estructura:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Y aquí está el fragmento de JavaScript:

$(document).ready(function() {
  $(''.container .content'').each( function() {
    container = $(this).closest(''.container'');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css(''margin-top'', margin);
  })
});

Si desea utilizarlo en un enfoque receptivo, puede agregar lo siguiente:

$(window).resize(function() {
  $(''.container .content'').each( function() {
    container = $(this).closest(''.container'');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css(''margin-top'', margin);
  })
});

Answer 6

Chris Coyier, quien escribió un excelente post sobre ''Centrando en lo desconocido'' en su blog. Es un resumen de múltiples soluciones. Publiqué uno que no está publicado en esta pregunta. Tiene más soporte para el navegador que la solución flexbox, y no está usando display: table; Lo que podría romper otras cosas.

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

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: ''.'';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 7

Esta es mi respuesta.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 8

Establezca el width y establezca el margin-left y margin-right a auto . Eso es solo para horizontal , sin embargo. Si quieres de las dos maneras, solo lo harás de las dos maneras. No tengas miedo de experimentar; No es como si rompieras algo.

Answer 9

Este método también funciona bien:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

Para el <div> interno, la única condición es que su height y width no deben ser mayores que las de su contenedor.

Answer 10

Esto es lo que quieres en el camino más corto.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Answer 11

Flex tiene más del 97% de cobertura de soporte del navegador y podría ser la mejor manera de resolver este tipo de problemas en pocas líneas:

#outer {
  display: flex;
  justify-content: center;
}

Answer 12

Hace poco tuve que centrar un div "oculto" (es decir, mostrar: ninguno;) que tenía una forma de tabla dentro que necesitaba estar centrado en la página. Escribí el siguiente jQuery para mostrar el div oculto y luego actualicé el CSS al ancho generado automáticamente de la tabla y cambié el margen para centrarlo. (La alternancia de visualización se activa al hacer clic en un enlace, pero este código no era necesario mostrar).

NOTA: Estoy compartiendo este código porque Google me trajo a esta solución de desbordamiento de pila y todo hubiera funcionado, excepto que los elementos ocultos no tienen ningún ancho y no se pueden redimensionar / centrar hasta después de que se muestren.

$(function(){
  $(''#inner'').show().width($(''#innerTable'').width()).css(''margin'',''0 auto'');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 13

He creado este example para mostrar cómo align vertical y horizontalmente .

El código es básicamente este:

#outer {
  position: relative;
}

y...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

y permanecerá en el center incluso cuando redimensione su pantalla.

Answer 14

Intenta jugar con

margin: 0 auto;

Si también quiere centrar su texto, intente usar:

text-align: center;

Answer 15

La forma en que normalmente lo hago es usando la posición absoluta:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

El div exterior no necesita propiedades adicionales para que esto funcione.

Answer 16

La forma más fácil:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 17

Los mejores enfoques son con CSS 3 .

Modelo de caja:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

De acuerdo con su facilidad de uso, también puede utilizar las propiedades box-orient, box-flex, box-direction .

Flexión :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Leer más sobre centrar los elementos secundarios.

• Enlace 2

• Enlace 3

• Enlace 4

Y esto explica por qué el modelo de caja es el mejor enfoque :

• ¿Por qué se considera mejor el modelo de caja W3C?

Answer 18

Me doy cuenta de que llego bastante tarde al juego, pero esta es una pregunta muy popular, y recientemente encontré un enfoque que no he visto mencionado en ningún lugar aquí, así que pensé que lo documentaría.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDITAR: ambos elementos deben tener el mismo ancho para funcionar correctamente.

Answer 19

No puede centrarse si no le da un ancho, de lo contrario tomará, por defecto, todo el espacio horizontal.

Answer 20

Otra solución para esto sin tener que establecer un ancho para uno de los elementos es usar el atributo de transform CSS 3.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

El truco es que translateX(-50%) establece el elemento #inner 50 por ciento a la izquierda de su propio ancho. Puedes usar el mismo truco para la alineación vertical.

Aquí hay un Fiddle muestra la alineación horizontal y vertical.

Más información está en Mozilla Developer Network .

Answer 21

Para Firefox y Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Para Internet Explorer, Firefox y Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

La propiedad text-align: es opcional para los navegadores modernos, pero es necesaria en el modo Internet Explorer Quirks para el soporte de los navegadores antiguos.

Answer 22

Por ejemplo, vea este enlace y el fragmento a continuación:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Si tiene muchos hijos bajo un padre, entonces su contenido CSS debe ser como este ejemplo en el violín .

El aspecto del contenido HTML le gusta esto:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Entonces ve este ejemplo en el violín .

Answer 23

Puedes aplicar este CSS al <div> interno:

#inner {
  width: 50%;
  margin: 0 auto;
}

Por supuesto, no es necesario establecer el width en 50% . Cualquier ancho menor que el contenido de <div> funcionará. El margin: 0 auto es lo que hace el centrado real.

Si está apuntando a IE8 +, podría ser mejor tener esto en su lugar:

#inner {
  display: table;
  margin: 0 auto;
}

Hará que el elemento interno se centre horizontalmente y funciona sin establecer un width específico.

Ejemplo de trabajo aquí:

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Answer 24

Puedes hacer algo como esto

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Esto también alineará el #inner verticalmente. Si no lo desea, elimine las propiedades de display y vertical-align ;

Answer 25

Si no desea establecer un ancho fijo en la div interna, podría hacer algo como esto:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Eso convierte a la div interna en un elemento en línea que puede centrarse con text-align .

Answer 26

Si no desea establecer un ancho fijo y no desea un margen adicional, agregue display: inline-block a su elemento.

Puedes usar:

#element {
    display: table;
    margin: 0 auto;
}

Answer 27

Supongamos que tu div es de 200px ancho:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Asegúrese de que el elemento padre esté positioned es decir, relativo, fijo, absoluto o pegajoso.

Si no sabes el ancho de tu div, puedes usar transform:translateX(-50%); En lugar del margen negativo.

https://jsfiddle.net/gjvfxxdj/

Answer 28

Una opción que encontré fue:

Todos dicen usar:

margin: auto 0;

Pero hay otra opción. Establezca esta propiedad para el div padre. Funciona perfectamente en cualquier momento:

text-align: center;

Y verás, niño va al centro.

Y finalmente CSS para ti:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

Answer 29

Propiedad de alineación de caja de CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

Answer 30

Si se desconoce el ancho del contenido, puede utilizar el siguiente método . Supongamos que tenemos estos dos elementos:

• .outer - ancho completo
• .inner : no se establece el ancho (pero se puede especificar un ancho máximo)

Supongamos que el ancho computado de los elementos es 1000px y 300px respectivamente. Proceder de la siguiente:

1. Envolver .inner dentro .center-helper
2. Haga .center-helper un bloque en línea; se convierte en el mismo tamaño que .inner por lo que tiene 300px de ancho.
3. Presione .center-helper 50% en relación con su padre; esto coloca su izquierda a 500px wrt. exterior.
4. Empuje .inner 50% a la izquierda con respecto a su padre; esto coloca su izquierda en -150px wrt. ayudante central, lo que significa que su izquierda está en 500 - 150 = 350px wrt. exterior.
5. Configure el desbordamiento en .outer en oculto para evitar la barra de desplazamiento horizontal.

Manifestación:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}