Estoy buscando una manera de centrar verticalmente el div container
dentro del jumbotron
y ponerlo en el centro de la página.
El .jumbotron
tiene que adaptarse a toda la altura y anchura de la pantalla. El div .container
tiene un ancho de 1025px
y debe estar en el medio de la página (centrado verticalmente).
Quiero que esta página tenga el jumbotrón adaptado al alto y ancho de la pantalla junto con el contenedor centrado verticalmente al jumbotrón. ¿Cómo puedo conseguirlo?
Comienza el snippet: js hide: false console: false babel: false -->
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
Fin del fragmento;
La alineación vertical es ahora muy sencilla mediante el uso de Diseño de caja flexible. Hoy en día, este método es compatible con una amplia gama de navegadores web, excepto Internet Explorer 8 y 9. Por lo tanto, tenemos que utilizar algunos hacks/polyfills o diferentes enfoques para IE8/9.
A continuación te mostraré cómo hacerlo en sólo 3 líneas de texto (sin tener en cuenta la antigua sintaxis de flexbox).
Nota: es mejor usar una clase adicional en lugar de alterar .jumbotron
para conseguir la alineación vertical. Yo'usaría el nombre de clase vertical-center
por ejemplo.
[Ejemplo Aquí][5] (Un Espejo en jsbin).
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Notas importantes (Consideradas en la demo):
Los valores porcentuales de las propiedades height
o min-height
son relativos a la height
del elemento padre, por lo que debe especificar la height
del padre explícitamente.
La sintaxis de flexbox prefijada por el vendedor/antigua se omite en el fragmento publicado debido a la brevedad, pero existe en el ejemplo en línea.
En algunos de los viejos navegadores web como Firefox 9 (en el que he probado), el contenedor flex - .vertical-center
en este caso - no ocupará el espacio disponible dentro del padre, por lo tanto necesitamos especificar la propiedad width
como: width: 100%
.
También en algunos navegadores web, como se ha mencionado anteriormente, el elemento flex - .container
en este caso - puede no aparecer en el centro horizontalmente. Parece que el "margen" izquierdo/derecho aplicado de "auto" no tiene ningún efecto sobre el elemento flexible.
Por lo tanto, necesitamos alinearlo mediante box-pack / justify-content
.
Para más detalles y/o alineación vertical de las columnas, puede consultar el siguiente tema:
Esta es la antigua respuesta que escribí cuando respondí a esta pregunta. Este método ha sido discutido aquí y se supone que también funciona en Internet Explorer 8 y 9. Lo explicaré en pocas palabras:
En el flujo inline, un elemento de nivel inline puede ser alineado verticalmente al centro mediante la declaración vertical-align: middle
. Especificación del W3C:
medio Alinear el punto medio vertical de la caja con la línea de base de la caja padre más la mitad de la altura x del padre.
En los casos en que el padre -el elemento .vertical-center
en este caso- tiene una altura
explícita, por casualidad si pudiéramos tener un elemento hijo que tuviera exactamente la misma altura
del padre, podríamos mover la línea de base del padre al punto medio del hijo de altura completa y sorprendentemente hacer que nuestro hijo deseado en el flujo -el .container
- se alineara al centro verticalmente.
Dicho esto, podríamos crear un elemento de altura completa dentro del .vertical-center
mediante los pseudoelementos ::before
o ::after
y también cambiar el tipo de display
por defecto de éste y del otro hijo, el .container
a inline-block
.
A continuación, utilice vertical-align: middle;
para alinear los elementos en línea verticalmente.
Aquí tienes:
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Además, para evitar problemas inesperados en pantallas extra pequeñas, puedes restablecer la altura del pseudo-elemento a auto
o 0
o cambiar su tipo de display
a none
si es necesario:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
Y una cosa más:
Si hay secciones footer
/header
alrededor del contenedor, es mejor posicionar esos elementos adecuadamente (¿relativo,
absoluto`? a tu gusto.) y añadir un valor de z-index
más alto (para asegurar) para mantenerlos siempre encima de los demás.
añadir Bootstrap.css y luego añadir esto a su css Comienza el snippet: js hide: false --> Este es el Css
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
Ahora llame a su página
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
Fin del fragmento;
Mi técnica preferida :
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
begin snippet: js hide: false -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-md-5 iPhone-features">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
Fin del fragmento;
¡Ver también [este Fiddle][1]!