dan4duk
Quiero centrar el contenedor div a continuación para que el sitio aparezca en el centro de la página, independientemente del tamaño de la pantalla.
http://penarthpc.com/~droneboy/
He jugado un poco, pero parece que me falta algo.
La solución a este problema es usar auto por margin en el CSS Y proporcionando algo de ancho al propio DIV:
div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}
La forma más fácil de centrar algo independientemente del ancho de la página es margin: auto; en tu CSS, con alto y ancho definidos.
.class {
height: 50px;
width: 50px;
margin: auto;
}
JSFiddle: http://jsfiddle.net/rVXBH/
.center-div {
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
}
Esto centrará su DIV con clase center-div horizontal Y verticalmente. los margin-left debe ser la mitad negativa de lo que es su ancho. los margin-top debe ser menos la mitad de la altura.
Para simplemente centrar horizontalmente:
.center-div {
width: 600px;
height: 600px;
position: relative;
margin-left: auto;
margin-right: auto;
}
simple. Simplemente proporcione el margen del contenedor de “0 auto”
margin: 0 auto;
MedBouzid
si desea centrar el contenedor (vertical):
si (horizontal) mira esto:
¿cómo-se-puede-centrar-horizontalmente-un-div-fácilmente
El siguiente código funcionará para cualquier tamaño de pantalla.
div.centered {
background-color: rgb(18, 80, 144);
height: 100vh;
}
div.centered span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: rgb(250, 255, 255);
}<div class="centered">
<span>Center</span>
</div>
fditz
Aquí hay un gran método que uso, hace uso de un antes de selector para crear un div invisible que se encargue de la alineación vertical:
HTML:
<body>
<div id="outter-div">
<div id="aligned">
<h1>A Nice Title</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
</body>
CSS:
/* This parent can be any width and height */
#outter-div {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
#outter-div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
#aligned{
display: inline-block;
vertical-align: middle;
width: 300px;
}
Esto se puede encontrar en esta publicación ¡que también tiene una demostración en jsbin!
independientemente del tamaño de la pantalla Si incluye teléfonos móviles también, utilice Preguntas de los medios.
– Nitesh
29 de agosto de 2013 a las 12:25
Publique algo de HTML/CSS o de lo contrario nadie sabe cuál es el problema…
– Marc Audet
29 de agosto de 2013 a las 12:30
mira este : yourinspirationweb.com/en/css-tips-how-to-center-an-element
– MedBouzid
29 de agosto de 2013 a las 12:38