I am looking to vertically center a <div>
in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only). I have several constraints:
div
must be centered vertically in the viewport. Methods I have seen only support centering inside another <div>
, which is not what I want.div
is not known.Other constraints:
div
must be aligned to the right.div
has a constant width.div
must support padding.div
acts as a menu.This gets me close to what I want, but not exactly:
#nav {
position: fixed;
right: 0;
top: 50%;
}
However, the top of the nav is in the middle, not the middle of the nav.
Is there some technique which allows me to center my div
with these constraints?
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
The simple and quick answer is to add android:gravity="center_vertical" to the parent(containing) view.
By default flex items will fill vertical space of their parent element. To vertically center our div we can add a single CSS property. By using align-items: center we can vertically center all flex items to the parent container along the cross axis of the flex container.
What's that? Taking 8 years to get the answer to a problem is too much?
Well, better late than never!
You got really close to the solution. I'd do it with transform: translate()
:
#nav {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
According to Can I use?, it is supported by everything except for IE8- and Opera Mini (which, to be honest, is a pretty good support).
I'd recommend you overkill it a bit and just add all of the vendor prefixes (just to make sure!):
#nav {
position: fixed;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's a snippet to show it to you in action:
#nav {
right: 0;
top: 50%;
position: fixed;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #ccc;
padding: 20px;
}
<div id="nav">
ABC<br/>
DEFGH<br/>
IJKLMNO<br/>
PQRS<br/>
TUVWXYZ
</div>
Hopefully it's still relevant to you! (who am I kidding, it's been 8 years)
you can use this as one of the solution.
<style>
#containter {
height: 100vh; //vh - viewport height
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#content {}
</style>
<div id="containter">
<div id="content">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</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