2012-04-24 18 views
5

Tengo un problema con el centrado de div en HTML (vertical & horizontal). Mi código se ve algo como esto:Cómo centrar div?

<div id="container">SOME HTML</div> 

#container{ 
    width: 366px; 
    height: 274px; 
    margin: 50%; 
    top: -137px; 
    left: -188px; 
    position:absolute; 
} 

Solo centro de cromo este div en el centro de la pantalla.

+4

puedo estar perdiendo algo, pero ¿cómo son sus expectativas para centrar un div si está utilizando posicionamiento absoluto? ¿Estás asumiendo que todas las pantallas tienen el mismo tamaño y resolución? –

Respuesta

1

Esto hace el truco (vertical & horizontal):

#container{ 
    position: absolute; 
    width: 366px; 
    height: 274px; 
    left: 50%; 
    top: 50%; 
    margin-left: -183px; /* half width */ 
    margin-top: -137px; /* half height */ 
} 
7

Esto centrará la <div> horizontal:

#container{ 
    width: 366px; 
    height: 274px; 
    margin: 0 auto; 
} 

Centrar verticalmente no es bastante simple, que tal vez tiene que usar javascript para eso, o tratar this css solution.

1

que puede usar:

#container { 
    // Your other values, but remove position: absolute; 
    margin: 0 auto; 
} 

Alternativamente, se puede hacer:

#wrapper, #container { 
    border: 1px solid red; 
    height: 500px; 
    width: 600px; 
} 

#wrapper { 
    bottom: 50%; 
    right: 50%; 
    position: absolute; 
} 

#container { 
    background: yellow; 
    left: 50%; 
    padding: 10px; 
    position: relative; 
    top: 50%; 
} 

Y vas código HTML:

<div id="wrapper"> 
    <div id="container"> 
     <h1>Centered Div</h1> 
     <p> 
      This div has been centered within your browser window.</p> 
    </div> 
</div> 

que centrarán el <div> en el medio de la ventana del navegador.

-1

debe estar bien utilizar simplemente CSS:

aquí es la demo

#container{ 
    width: 366px; 
    height: 274px; 
    margin: 50%; 
    top: 50%; 
    left: 50%; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}​ 
+0

no entendí, ¿por qué es-1? ¿Está mal de alguna manera? – AlexC

2
#container{ 
    width: 366px; 
    height: 274px; 
    top: 50%; 
    left: 50%; 
    margin: -137px 0 0 -188px; 
    position:absolute; 
} 
+0

Gracias mucho! ;) Ahora funciona. – What

1

prueba este :

<div class="cont"> 
    <div class="box"></div> 
</div> 

Css:

.cont{ 
    background-color: tomato; 
    width: 600px; 
    height: 400px; 
    position: relative; 
} 
.box { 
    width:100px; 
    height:100px; 
    background-color: teal; 
    color:#fff; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%) 
} 
Cuestiones relacionadas