texto - ¿Cómo se puede centrar div absoluta horizontalmente usando CSS?

centrar texto css

Question

Tengo un div y quiero que se centre horizontalmente, aunque le estoy dando margin:0 auto; no está centrado ...

.container {
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin:0 auto;
}

Answer 1

Aunque las respuestas anteriores son correctas, pero para que sea sencillo para los novatos, todo lo que necesita hacer es establecer el margen, a la izquierda y a la derecha. El siguiente código lo hará siempre que se establezca el ancho y la posición sea ​​absoluta:

margin: 0 auto;
left: 0;
right: 0;

Manifestación:

.centeredBox {
margin: 0 auto;
left: 0;
right: 0;
/** Position should be absolute */
position: absolute;
/** And box must have a width, any width */
width: 40%;
background: #faebd7;
}

<div class="centeredBox">Centered Box</div>

Answer 2

Debe configurar a la left:0; right:0; left:0; right:0; .

Esto especifica qué tan lejos compensar los bordes del margen desde los lados de la ventana.

http://www.w3.org/TR/CSS2/visuren.html#position-props

http://jsfiddle.net/SS6DK/

CSS

.container
{
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
}

Nota: Debe definir el width o esta respuesta no funcionará . Eso significa que esta respuesta no es útil para elementos con anchos dinámicos.

Answer 3

Esto no funciona en IE8, pero podría ser una opción a considerar. Es principalmente útil si no desea especificar un ancho.

.element
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}

Answer 4

Flexbox? Puedes usar flexbox.

.box {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.box div {
border:1px solid grey;
flex: 0 1 auto;
align-self: auto;
background: grey;
}

<div class="box">
<div class="A">I''m horizontally centered.</div>
</div>

Answer 5

No puedes usar margin:auto; en position:absolute; elementos, simplemente elimínalo si no lo necesitas, sin embargo, si lo haces, puedes usarlo a la left:30%; ((100% -40%) / 2) y consultas de medios para los valores máximo y mínimo:

.container {
position: absolute;
top: 15px;
left: 30%;
z-index: 2;
width:40%;
height: 60px;
overflow: hidden;
background: #fff;
}
@media all and (min-width:960px) {
.container {
left: 50%;
margin-left:-480px;
width: 960px;
}
}
@media all and (max-width:600px) {
.container {
left: 50%;
margin-left:-300px;
width: 600px;
}
}

Answer 6

tan fácil, solo use margen y propiedades izquierda, derecha:

.elements {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

Puedes ver más en este consejo => Cómo configurar el elemento div para centrar en html- Obinb blog

Answer 7

.centerDiv {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align:center;
}