Menu
I have a page with Twitter Bootstrap container-fluid class div, one row and one col-md-6 inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a div inside that column, that I want to be in the center of the column.
<body>
<div class="container-fluid cont">
<div class="row logoRow">
<div class="col-md-6 logoCol">
<div class="logoCont center-block"></div>
</div>
</div>
</div>
</body>
And the style is:
html, body {
height: 100%;
}
.cont {
height: 100%;
background: blue;
}
.logoRow {
height: 50%;
background: green;
}
.logoCol {
height: 100%;
background: yellow;
}
.logoCont {
height: 50%;
width: 50%;
background: red;
}
Here is my fiddle of this: http://jsfiddle.net/p9ou30g7/2/
Adding a center-block class to inner div aligned it to horizontal center, but I also need to align it vertically to the center of the column.
So that red div is in the center of the yellow one.
How can this be done?
706
This is one way to do it, and is more crossbrowser supported than flexbox.
http://jsfiddle.net/p9ou30g7/3/
.logoCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 50%;
width: 50%;
background: red;
}
There are other ways that you can check out here: https://css-tricks.com/centering-css-complete-guide/
108
You can use the CSS3 Flexible boxes
Just add another CSS rule like this (I modified a little bit the other rules to give the divs fixed sizes so you can see the effect) :
.flexbox {
display:flex;
justify-content:center;
align-items: center;
flex-flow: column;
}
and add it to your HTML
<div class="col-md-6 logoCol flexbox">
Here's the fiddle http://jsfiddle.net/1td4Lg5k/
And this must be important to see Can I use flex?
Hope it helps
35
Alter the outer div with
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"
Worked for my login box
<div class="mainbox col-md-3"... style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
<div class="panel-heading">
<div class="panel-title">Login</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
