it-swarm-es.com

¿Cómo centrar horizontalmente un <div>?

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

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

Puede aplicar este CSS al <div> interno:

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

Por supuesto, no es necesario configurar width en 50%. Cualquier ancho menor que el que contiene <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 una width específica.

Ejemplo de trabajo aquí:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

4316
Justin Poliey

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.

1160
Alfred

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 usar las propiedades box-orient, box-flex, box-direction.

Flex :

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

Leer más sobre centrar los elementos secundarios.

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

329
Konga Raju

Supongamos que su div es 200px wide:

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

Asegúrese de que el elemento padre esté 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/

231
nuno_cruz

He creado este ejemplo para mostrar cómo verticalmente y horizontalmentealign.

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 la center incluso cuando redimensione su pantalla.

210
Tom Maton

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

Esta sintaxis está desactualizada y no debe usarse más. [Ver también esta publicación] .

Así que, para completar, esta es la última forma de centrarse en CSS 3 utilizando el Flexible Box Layout Module.

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 más antigua para flexbox aquí está un buen lugar para buscar.

175
Danield

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;
}
127
Salman Abbas

propiedad de alineación de caja de CSS3

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

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

79
gizmo

Establezca width y establezca margin-left y margin-right a auto. Eso es para horizontal solamente , 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.

78
Sneakyness

Centrado en 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 .

77
iamnotsam

Hace poco tuve que centrar un div "oculto" (es decir, mostrar: ninguno;) que tenía una forma de tabla dentro que debía estar centrada en la página. Escribí el siguiente jQuery para mostrar el div oculto y luego actualizo el CSS al ancho generado automáticamente de la tabla y cambio 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>

55
James Moberg

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.

49
william44isme

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 la compatibilidad con los navegadores antiguos.

48
ch2o

Esta es mi respuesta.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

43
Ankit Jain

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

#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 una Fiddle que muestra la alineación horizontal y vertical.

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

39
Kilian Stinson

Chris Coyier, quien escribió una excelente publicación en 'Centrar 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á utilizando 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;
}
38
Willem de Wit

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.

33
BenjaminRH

Por ejemplo, vea este enlace y el siguiente fragmento de código:

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 de CSS debe ser así: 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>

Luego vea este ejemplo en el violín .

28
Lalit Kumar

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>

25
joan16v

Centrado solo horizontalmente

En mi experiencia, la mejor manera de centrar una caja 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>

Vea también este Fiddle !


Centrado tanto horizontal como verticalmente.

En mi experiencia, la mejor manera de centrar una caja tanto verticalmente como horizontalmente es usar 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>

Vea también este Fiddle !

25
John Slegers

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 % );
}
22
caniz

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 display y vertical-align;

22
Kenneth Palaganas

Si se desconoce el ancho del contenido, puede usar 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 calculado de los elementos es 1000px y 300px respectivamente. Proceder de la siguiente:

  1. Ajustar .inner dentro de .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% a la derecha con respecto a su padre; esto coloca su izquierda a 500px wrt. exterior.
  4. Presione .inner 50% restante en relación con 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%;
}
21
Salman A

Alineación de texto: centro

Aplicando text-align: center los contenidos en línea están centrados dentro del cuadro de línea. Sin embargo, como la división interna tiene por defecto width: 100%, debe establecer un ancho específico o usar uno de los siguientes:

#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 más antiguos. Funciona junto con display: table .

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Flexbox

display: flex se comporta como un elemento de bloque y establece 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 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. Usándolo, los elementos se pueden traducir, rotar, escalar y sesgar. Para centrarse horizontalmente 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> (en desuso)

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 es obsoleta 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>

21
Paolo Forgia

Bueno, logré encontrar una solución que quizás se ajuste a todas las situaciones, pero que use 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 usarlo 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);
  })
});
19
Miguel Leite

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 puede visitar w3schools - CSS flex Property para más ideas.

19
Milan Panigrahi

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 */
}
18
Pnsadeghy

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

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 debe ser mayor que las de su contenedor.

18
Billal Begueradj

Intenta jugar con 

margin: 0 auto;

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

text-align: center;
17
user1817972

Si alguien quisiera una solución jQuery para el centro, alinee estos divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
17
sarath

simplemente puede usar flexbox así:

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Aplique Autoprefixer para todo el soporte del navegador:

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

SI NO

utilizar transformar :

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

con Autoprefixer:

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
9
Shashin Bhayani

CSS 3:

Puede usar el siguiente estilo en el contenedor principal para distribuir los elementos secundarios de manera uniforme horizontalmente:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

A Nice DEMO con respecto a los diferentes valores de justify-content.

 Enter image description here

CanIUso: Compatibilidad del navegador

¡Pruébalo! -

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

7
Legends

He aplicado el estilo en línea para div interior. Usa este. 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
7
aamirha
#inner {
    width: 50%;
    margin: 0 auto;
}
6
anand jothi

Puedes lograr esto usando el CSS Flexbox . Solo necesita aplicar 3 propiedades al elemento padre para que todo funcione.

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

Eche un vistazo al siguiente código para entender mejor las propiedades.

Conozca más acerca deCSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

6
Saurav Rastogi

Lo bueno que encontré recientemente, al mezclar el uso de line-height + vertical-align y el 50% truco dejado, puede center una caja de tamaño dinámico dentro de otra caja de tamaño dinámico, tanto horizontal como vertical usando CSS puro. 

Tenga en cuenta que debe usar spans (y inline-block), probados en navegadores modernos + IE8. HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Ver ejemplo aquí

6
Josh Mc

¿Qué tal el CSS a continuación para #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

Principalmente utilizo este CSS para centrar divs.

5
Rajesh

¡Hazlo simple!

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
4
Hassan Siddiqui

Centro un div en un div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

3
antelove

Solo uso la solución más simple, pero funciona en todos los navegadores:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
3
Gerald Goshorn

Utilizar:

<div id="parent">
  <div class="child"></div>
</div>

Estilo:

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

Si quieres centrarlo horizontalmente, debes escribir lo siguiente:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
3
Руслан

Es posible usar CSS 3 flexbox . Tienes dos métodos al usar flex box.

  1. Establezca el display:flex; padre y agregue las propiedades {justify-content:center; ,align-items:center;} al elemento padre.

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

  1. Establezca el elemento principal display:flex y agregue margin:auto; al elemento secundario.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

3
Dream Hunter

También se puede centrar horizontal y verticalmente mediante el posicionamiento absoluto, como este:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
3
Agu Dondo
.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
3
pavelbere

Puedes usar el flexbox.

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

Puede obtener más información al respecto en este enlace: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3
Cyan Baltazar

Quería responder esto, ya que noté que nadie mencionó el método calc. El uso es para el div que estás centrando, si conoces su ancho, digamos que es de 1200 píxeles, elige:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Así que básicamente agregará un margen izquierdo de 50% menos la mitad del ancho conocido.

2
serdarsenay

La forma más conocida que se usa ampliamente y funciona en muchos navegadores incluyendo los antiguos, es usar margin como se muestra a continuación:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Ejecute el código para ver cómo funciona, también hay dos cosas importantes que no debe olvidar en su CSS cuando intente centrar de esta manera: margin: 0 auto; que lo convierte en el centro div como se desea, y no olvide width del niño , de lo contrario no se centrará como se esperaba! 

2
Alireza

A partir de 2019, ya que esta pregunta aún recibe muchos resultados, una respuesta muy simple y cruzada al centro horizontal es aplicar esta regla al elemento principal:

.parentBox {
 display: flex;
 justify-content: center
}
2
Ady Ngom

Esta es otra forma de centrar horizontalmente con flexbox y sin especificar ningún ancho para el contenedor interno. La idea es utilizar pseudo elementos que empujen el contenido interno de la derecha y la izquierda.

El uso de flex:1 en el pseudo elemento hará que llenen los espacios restantes y tomen el mismo tamaño y el contenedor interno se centre.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

También podemos considerar la misma situación para la alineación vertical simplemente cambiando la dirección de flexión a columna:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

2
Temani Afif

Esto centraliza tu div interior horizontalmente y verticalmente:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Para solo alinear horizontalmente, cambiar

margin: 0 auto;

y para vertical, cambio.

margin: auto 0;
1
Shivam Chhetri

CSS

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

HTML

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

Después de leer todas las respuestas no vi la que prefiero. Así es como puedes centrar un elemento en otro. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

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

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
1
Mardok

Puedes añadir este código:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Rafiqul Islam

Dependiendo de sus circunstancias, la solución más simple podría ser:

margin:0 auto; float:none;
1
Justin Munce

La respuesta más fácil es add margin: auto; a interior.

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

código css

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

verifique mi enlace de código http://codepen.io/feizel/pen/QdJJrK

 enter image description here

1
Faizal Munna

Dale algo de width a la div interna y agrega margin:0 auto; en la propiedad CSS.

1
Mr.Pandya

Utilizar:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
1
SUNIL KUMAR E.U

Sí, este es un código corto y limpio para alineación horizontal. Espero que te guste este código.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
1
Banti Mathur

Utilice el siguiente código.

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
1
Faizal

Usa este código:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
1
Husain Ahmed

Lo puedes hacer comprando usando flex-box witch es una buena técnica en estos días. Para usar flex-box debes darle display: flex; y align-items: center; a tu elemento principal o #outer div. El código debería ser así:

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Esto debería centrar a su hijo o a #inner div horizontalmente. Pero en realidad no puedes ver ningún cambio. Debido a que nuestro #outer div no tiene altura o, en otras palabras, su altura se establece en auto, por lo que tiene la misma altura que todos sus elementos secundarios. Entonces, después de un poco de estilo visual, el código de resultado debería ser así:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Puedes ver que #inner div ahora está centrado. Flex-box es el nuevo método de posicionamiento de elementos en pilas horizontales o verticales con CSS y tiene el 96% de compatibilidad de los navegadores globales. Por lo tanto, es libre de usarlo y si desea obtener más información sobre Flex-box visite CSS-Tricks article, este es el mejor lugar para aprender a usar Flex-box en mi opinión.

1
Morteza Sadri

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

1
Qmr

Es tan simple.

Simplemente decida qué ancho desea darle a la división interna y use el siguiente CSS.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
1
Gaurav Aggarwal

Esto seguramente centrará su #inner tanto horizontal como verticalmente. Esto también es compatible en todos los navegadores. Acabo de agregar un estilo adicional solo para mostrar cómo está centrado.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Pero, por supuesto, si solo lo quieres alineado horizontalmente, esto puede ayudarte.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Mark Salvania

Puede usar una línea de código, solo text-align:center.

Aquí hay un ejemplo:

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

1
Yahya Essam

Una de las maneras más fáciles de hacerlo es utilizando display: flex. El div exterior solo necesita tener una pantalla flexible, y el interno necesita margin: 0 auto para que esté centrado horizontalmente.

Para centrar verticalmente y simplemente centrar un div dentro de otro div, mire los comentarios de la clase .inner a continuación

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

1
drewkiimon
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
1
Majid Sadr

Lo siento, pero este bebé de la década de 1990 solo FUNCIONA por mí:

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

¿Voy al infierno por este pecado?

1
Heitor

Lo mejor que he usado en mis diferentes proyectos es 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

enlace de violín

1
Jaison

Podríamos usar la siguiente clase de CSS, que permite centrar vertical y horizontalmente cualquier elemento contra su padre:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
Elias MP

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

0
Fahad Uddin

La mejor manera es usar la visualización de celda de tabla (interna) que viene exactamente después de una división con la tabla de visualización (exterior) y establecer la alineación vertical para la división interna (con visualización de celda de tabla) y cada etiqueta que use en la división interna colocada en el centro de div o página.

Nota: debe establecer una altura especificada en exterior

Es la mejor manera que conoce sin posición relativa o absoluta, y puede usarla en todos los navegadores de la misma manera.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

0
hossein ghaem

En lugar de múltiples envoltorios y/o márgenes automáticos, esta solución simple funciona para mí:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Coloca el div en el centro de la vista (vertical y horizontal), ajusta el tamaño y ajusta el tamaño, centra la imagen de fondo (vertical y horizontal), centra el texto (horizontal) y mantiene el div en la vista y sobre el contenido. Simplemente coloque en el HTML body y disfrute.

0
Cees Timmerman

Prueba esto:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
0
Ajay Gupta

esto funcionó para mí:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

En este código, usted debe determinar el ancho del elemento.

Encontré similar con margin-left, pero puede ser left también.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
0
iorgu

Agrega CSS a tu div interior Establece margin: 0 auto y establece su ancho menor al 100%, que es el ancho del div exterior.

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

Esto le dará el resultado deseado.

0
Joseph

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

0
Anu

Sé que llego un poco tarde para responder esta pregunta, y no me he molestado en leer todas las respuestas, por lo que este may es un duplicado. Aquí está mi toma :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
0
#inner {
  width: 50%;
  margin: 0 auto;
}
0
Javed Khan

Simplemente Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

0
Sankar

Agregar text-align:center; a la división padre  

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

0
Friend

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

0
Galarist

Los atributos principales para centrar el div son margin: auto y width: según los requisitos:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
0
Anu
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

por lo normal si usas div modo estático

si quieres que div esté centrado cuando div es absoluto para su padre, aquí tienes un ejemplo:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}
0

Puedes hacerlo de otra manera. Vea los ejemplos a continuación:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
0
Gaurang Sondagar

Prueba esto:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
0
hossein ketabi

Primero que todo: necesitas darle un ancho a la segunda división:

Por ejemplo:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

Tenga en cuenta que si no le da un ancho, tomará todo el ancho de la línea.

0
user3968801