Pregunta Cómo alinear un
con el medio (horizontal / ancho) de la página


tengo un div etiqueta con width ajustado a 800px. Cuando el ancho del navegador es mayor que 800px, no debe estirar el div pero debería llevarlo al medio de la página.


698
2018-06-05 01:44


origen


Respuestas:


<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

945
2018-06-05 01:49



position: absolute y entonces top:50% y left:50% coloca el borde superior en el centro verticalmente de la pantalla, y el borde izquierdo en el centro horizontal, luego mediante la adición margin-top a negativo de la altura de la div i.e -100 lo desplaza por encima de 100, de manera similar para margin-left. Esto obtiene div exactamente en el centro de la página.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>  


273
2018-05-29 07:55



  1. ¿Quiere decir que quiere centrarlo vertical u horizontalmente? Dijiste que especificaste el height a 800px, y quería que el div no se estire cuando width era más grande que eso ...

  2. Para centrar horizontalmente, puede usar margin: auto; atributo en css. Además, deberá asegurarse de que body y html los elementos no tienen ningún margen o relleno:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

55
2018-06-05 01:47



Moderno Flexbox la solución es la manera de entrar / desde 2015. justify-content: center se usa para que el elemento padre alinee el contenido al centro del mismo.

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

Salida

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>


51
2017-08-17 17:25



Para que también funcione correctamente en Internet Explorer 6, debe hacerlo de la siguiente manera:

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

36
2018-06-05 07:54



<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

31
2018-01-16 15:06



También puedes usarlo así:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>

25
2017-12-01 10:45



Simplemente use la etiqueta central justo después de la etiqueta corporal y la etiqueta central final justo antes de que el cuerpo termine

<body>
<center>
........your code here.....
</center>
</body>

Esto funcionó para mí con todos los navegadores que he probado


14
2018-05-11 10:45



Agregue esta clase al div que desea centrado (que debe tener un ancho establecido):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

O bien, agregue los elementos de margen a su clase div, así:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

12
2018-02-10 16:16



Utilizar propiedad css flex: http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}

11
2018-03-30 19:25