¿Cómo centrar horizontalmente 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

Puedes aplicar este CSS al interior <div>:

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

Por supuesto, no es necesario configurar el width a 50%.Cualquier ancho menor que el contenedor <div> trabajará.El margin: 0 auto es lo que hace el centrado real.

Si su objetivo es IE8+, podría ser mejor tener esto en su lugar:

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

Hará que el elemento interior se centre horizontalmente y funcionará sin establecer un valor específico. width.

Ejemplo de trabajo aquí:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

Answer 2

Si no desea establecer un ancho fijo en el interior div podrías 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 hace que el interior div en un elemento en línea que se puede centrar con text-align.

Answer 3

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%;
}

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

Según su usabilidad también puede utilizar el box-orient, box-flex, box-direction propiedades.

Doblar:

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

Lea más sobre cómo 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 del W3C?

Answer 4

Supongamos que tu div es 200px ancho:

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

Asegúrese de que el elemento principal sea posicionado es decir.relativo, fijo, absoluto o pegajoso.

Si no conoce el ancho de su div, puede usar transform:translateX(-50%); en lugar del margen negativo.

https://jsfiddle.net/gjvfxxdj/

Answer 5

he creado esto ejemplo para mostrar cómo verticalmente y horizontalmente align.

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 se quedará en el center incluso cuando tu cambiar el tamaño tu pantalla.

Answer 6

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

Esta sintaxis está desactualizada y ya no debería usarse.[Ver también esta publicación].

Entonces, para completar, aquí se presenta la última forma de centrarse en CSS 3 usando el Módulo de diseño de caja flexible.

Entonces, 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 principal (.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 utilizan una sintaxis anterior para flexbox aquí está un buen lugar para mirar.

Answer 7

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

Puedes usar:

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

Answer 8

Centrar un div de altura y ancho desconocidos

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>

Juega con ello más adelante codepen o en JSBin.

Answer 9

No se puede centrar si no le das un ancho, de lo contrario ocupará, por defecto, todo el espacio horizontal.

Answer 10

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 11

Selecciona el width y establecer margin-left y margin-right a auto.Eso es solo para horizontales, aunque.Si quieres ambos sentidos, simplemente hazlo en ambos sentidos.No tengas miedo de experimentar;No es que vayas a romper nada.

Answer 12

Recientemente tuve que centrar un div "oculto" (es decir, display:none;) que tenía un formulario en tabla que debía centrarse 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.(El cambio de visualización se activa al hacer clic en un enlace, pero no era necesario mostrar este código).

NOTA:Estoy compartiendo este código porque Google me llevó a esta solución de desbordamiento de pila y todo habría funcionado excepto que los elementos ocultos no tienen ancho y no se pueden cambiar de tamaño/centrar hasta 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

La forma en que suelo hacerlo es usando la posición absoluta:

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

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

Answer 14

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>

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

Answer 15

Esta es mi respuesta.

#outerDiv {
  width: 500px;
}

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

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

Answer 16

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

Aquí está un Violín mostrando alineación horizontal y vertical.

Más información está en Red de desarrolladores de Mozilla.

Answer 17

Chris Coyier, quien escribió un excelente publicación sobre 'Centrarse 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 compatibilidad con el navegador que la solución flexbox y no estás usando display: table; 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 18

Me doy cuenta de que llegué bastante tarde al juego, pero esta es una pregunta muy popular y recientemente encontré un enfoque que no había visto mencionado en ninguna parte aquí, así que pensé en documentarlo.

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

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

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

Answer 19

Por ejemplo, ver 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 la tutela de uno de sus padres, su contenido CSS debe ser así ejemplo en violín.

El contenido HTML se ve así:

<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 mira esto ejemplo en violín.

Answer 20

Centrar solo horizontalmente

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

El contenedor:

• debería tener text-align: center;

El cuadro de contenido:

• debería 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>

Ver también este violín!

---

Centrado tanto horizontal como verticalmente

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

El contenedor exterior:

• debería tener display: table;

El contenedor interior:

• debería tener display: table-cell;
• debería tener vertical-align: middle;
• debería tener text-align: center;

El cuadro de contenido:

• debería 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>

Ver también este violín!

Answer 21

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 22

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 ha establecido ningún ancho (pero se podría especificar un ancho máximo)

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

1. Envoltura .inner adentro .center-helper
2. Hacer .center-helper un bloque en línea;se vuelve del mismo tamaño que .inner haciéndolo de 300px de ancho.
3. Empujar .center-helper 50% de derecho respecto de su matriz;esto coloca su izquierda en 500px wrt.exterior.
4. Empujar .inner 50% restante en relación con su matriz;esto coloca su izquierda en -150px wrt.ayudante central, lo que significa que su izquierda está en 500 - 150 = 350px wrt.exterior.
5. Activar el desbordamiento .outer a 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%;
}

Answer 23

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á la #inner verticalmente.Si no quieres, quita el display y vertical-align propiedades;

Answer 24

Esto es lo que quieres de la manera más corta.

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 25

Texto alineado:centro

Aplicando text-align: center el contenido en línea está centrado dentro del cuadro de línea.Sin embargo, dado que el div interno tiene por defecto width: 100% tienes que 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 automático

Usando margin: 0 auto es otra opción y es más adecuada para la compatibilidad con navegadores más antiguos.Funciona junto con display: table.

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

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

---

Caja flexible

display: flex se 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.Ver aquí para obtener una lista 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 le permite modificar el espacio de coordenadas del modelo de formato visual CSS.Al usarlo, los elementos se pueden traducir, rotar, escalar y sesgar.Para centrar horizontalmente se requiere position: absolute y left: 50%.

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

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

---

<center> (Obsoleto)

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

#inner {
  display: inline-block;
}

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

Answer 26

Puedes usar display: flex para tu div exterior y para centrar horizontalmente tienes que agregar justify-content: center

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

o puedes visitar w3schools - Propiedad flexible CSS para más ideas.

Answer 27

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 interior <div>, la única condición es que su height y width No debe ser mayor que los de su contenedor.

Answer 28

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

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

Answer 29

Bueno, logré encontrar una solución que tal vez 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 responsivo, 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 30

Existía una opción que encontré:

Todo el mundo dice usar:

margin: auto 0;

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

text-align: center;

Y mira, niño, ve 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 */
}