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