Problem
Is there a way to CENTER A DIV both vertically and horizontally without the content being chopped off when the window is less than the content? A background color, as well as a width and height, must be included in the div.
I’ve always used absolute positioning and negative margins to center divs, as shown in the example. However, it has the drawback of cutting the content off at the top. Is there a way to orient the div.content without causing this issue?
I’ll use this as an example: http://jsbin.com/iquviq/1/edit
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
<div class="background">
<div class="content"> some text </div>
</div>
“How to center an element horizontally and vertically?” is not a copy of my query. 1- My question has already been asked. (Just double-check the dates). 2- My condition in my query is very clear and in black: “the content will not be chopped when the window is smaller than the content.”
Asked by Nrc
Solution #1
When you have that luxury. There’s flexbox too, but that’s not broadly supported at the time of this writing.
HTML:
<div class="content">This works with any content</div>
CSS:
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Play around with it more on Codepen or JSBin.
Look elsewhere in this forum for outdated browser support.
Answered by iamnotsam
Solution #2
After a lot of trial and error, I’ve discovered a method that works. If someone finds it useful, I’ll post it here. You can see it here working: http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
Answered by Nrc
Solution #3
Here’s an example: http://www.w3.org/Style/Examples/007/center-example
a procedure (JSFiddle example)
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div id="content">
Content goes here
</div>
Another approach is to (JSFiddle example)
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
Answered by MultiformeIngegno
Solution #4
The proper way to do it, regardless of the div’s size for any browser size, is to:
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
Live Code
Answered by Suraj Rawat
Solution #5
This post compares and contrasts many methods: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
They suggest placing an empty floating element before the content that can’t be centered and then clearing it. It does not have the disadvantage that you described.
To implement it, I forked your JSBin: http://jsbin.com/iquviq/7/edit
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
Answered by clement g
Post is based on https://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically