Issue
I want to center a div horizontally and vertically at all times.
I can reduce/increase the width of the window and the div will respond by always remaining in the center of the window
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
Here is a JSFiddle Example of what I have currently. But I want to keep the div centered vertically as well so if I reduce/increase the height of the window the the div will respond by staying in the middle of the window.
In regards to the example, I want to keep the blackbox vertically centered on window resize in the same way it always stays in the center horizontally.
Solution
You can do this with CSS tables:
Markup
<div class="container">
<div class="cent"></div>
</div>
(Relevant) CSS
html,body
{
height: 100%;
}
body
{
display: table;
margin: 0 auto;
}
.container
{
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent
{
height: 50px;
width: 50px;
background-color: black;
}
Answered By - Danield
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.