I'm looking for a valid cross-browser solution for an HTML page which:
Consumes 100% of the screen height, with no overflow (i.e. no scrolling)
has a vertically (and horizontally) centered <div> which will hold the main content
I know vertical centering is possible when the wrapping container has a static height. Is adjusting this height to browser window height something feasable? (Preferably, no JS should be used.)
Depends on what you mean with "cross browser". Following works fine with all current, standards compatible ones (thus not IE6):
HTML:
<div id="a">
<div id="b">
<div id="content"></div>
</div>
</div>
CSS:
html, body, #a {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#a {
display: table;
}
#b {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
#content {
border: 5px solid red;
width: 100px;
height: 100px;
margin: auto;
}
Live example:
http://jsfiddle.net/mGPmr/1/
You could do something like this. It looks to work in IE6 as well:
<html> <head>
<script type="text/javascript"> </script>
<style type="text/css">
#container { height: 100%; width: 100%; position: relative; }
#content {
border: 5px solid red;
width: 100px;
height: 100px;
position: relative;
margin-left: -50px;
margin-right: -50px;
top: 50%;
left: 50%; }
</style>
</head> <body>
<div id="container">
<div id="content"></div> </div>
</body> </html>
Is simply not possible without JavaScript, at least not with CSS2 or earlier (not sure if CSS3 makes this possible, someone clarify on that).
The other provided answers require absolute width and height for the element; I assumed no such requirement. There's no way to center a flowing element vertically which is what you usually want, given that you don't know the aspect ratio of the browser window to reliably use fixed-size containers for content.
Related
I'm trying to center a div at the bottom of the page and having no luck. I've scoured the web, but keep turning up nothing when attempting to apply their solutions.
Any chance anyone out there might have a solution? See code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
background-color: aqua;
height:100%;
min-height:100%;
}
.centerDiv {
display: table;
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
text-align: center;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="box box1" style="background-color:#585858;"> </div>
<div class="box box2" style="background-color:#118C4E;"> </div>
<div class="box box3" style="background-color:#C1E1A6;"> </div>
<div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body>
</html>
I think you mean, that your div will be at the bottom of page. This would help you:
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
Setting position to fixed and div will stay at a place anytime (also when you scroll down).
The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window. If you want the box to always be at the bottom of the window, then you need to use position: fixed, and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is.
See the demo here for the result with the fixed position.
.centerDiv {
width:100%;
text-align: center;
position: fixed;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
}
Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. That's a bit tougher to do with CSS. However, it's easy with jQuery, if you don't mind using scripting:
See the demo here for the result using jQuery.
var minheight = $(window).height();
$("body").css("min-height", minheight);
and
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
.centerDiv {
width:100%;
text-align: center;
position: absolute;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
div element has an align attribute so it can help:
<div align="center"></div>
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
The problem is my layout does not break on zoom out or in, it just wraps to the left, so at the smallest zoom you would see my layout in the leftmost part of the browser screen.
While I want my layout to decrease in size but not float left. I want it to remain centered perfectly all the time every single zoom.
How do I do that?
<body class="body">
<div class="wrapper">/</div>
<script src="js/jquery.js" type="text/javascript"></script>
</body>
.body {
position: absolue;
top: 0%;
margin: 0 auto;
width: 1366px;
height: 768px;
background: white;
}
.wrapper {
position: absolute;
left: 20%;
right: 20%;
margin: 0 auto;
min-height: 100%;
background: black;
}
On your body tag, put text-align: center; this should keep everything centered even when zooming.
I'm not sure what isn't working about your code.
Here's an example of the code you provided in jsFiddle which appears to be centering fine at any zoom level.
Working Demo in Fiddle
Traditionally the trick to centering a div is margin: 0 auto;
But you're doing that, so I think you're okay.
Is there any other formatting you have that is interfering? Can you provide more info?
You can try this:
<body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>
body {
text-align: center;
}
#page-wrap {
text-align: left;
width: 800px;
margin: 0 auto;
}
I have an element which is an image within a div id. I am going to make this page a under construction page. I made the div with a "margin: auto" css command. What is away vertically that I can have the div auto center to any browser accessed by the site?
New to this don't know how to do the whole JSFiddle thing lol
Heres a url too: http://nerissagrigsby.com/?page_id=5
My CSS:
#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}
My HTML:
<body>
<div id="openpagesig">
<img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
/>
</div>
<!-- Open Page Signature -->
</body>
Have you tried the following CSS:
.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
position: absolute; /* or "fixed" */
/* The element you want to place in the middle of the page
center should have explicitly defined dimensions: */
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px; /* offset back at exactly half height of the element */
left: 50%;
margin-left: -50px; /* offset back at exactly half width of the element */
}
Here's a working example.
Do I need to mention, that this works even in Internet Explorer 5.5! ... but I doubt this browser is still relevant to anyone.
Please refer to the image below to see how the negative margins help:
Try something like:
.centeredDiv {
width:17em;
height:9em;
position:absolute;
left:50%;
top:50%;
margin:-135px 0 0 -155px;
padding:1em;
background-color:#fffff7;
opacity:0.67;
filter:alpha(opacity=67); /* for IE8 and earlier */
border:2px solid #191919;
}
Obviously editing measurements and colours to suit.
The problem you're having is related to vertically aligning div elements on a page. This is a common problem in HTML and CSS coding.
One solution is to have a container element within an outer div tag. The outer div should be set to display: table; and position: fixed; with 100% width and height as well. Set the inner div to display: table-cell; with the vertical-align: middle; property.
Furthermore, the outer div should have text-align: center; in order to center its child elements.
Here is the code you need:
.outer {
display: table;
height: 100%;
width: 100%;
text-align: center;
position: fixed;
}
.container {
display: table-cell;
vertical-align: middle;
}
An example from jsbin:
http://jsbin.com/otolot/1/
Try resizing the window to see that this works.
Personally I use something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="container">
<div class="container-content">
<div class="content">
<img src="//placehold.it/803x283" />
</div>
</div>
</div>
</body>
</html>
<style>
html, body {
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
margin: auto;
}
.container-content {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.container-content > .content {
max-width: 803px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
</style>
This solution works very nicely, because not only does it vertically center the content, but if the browser windows height is too small to display it all, you can still scroll to see all of the content which is one of the major drawbacks of using other methods.
Example:
http://jsbin.com/owayec/2/
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
Is there a way to CENTER A DIV vertically and horizontally but, and that is important, that the content will not be cut when the window is smaller than the content The div must have a background color and a width and hight.
I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?
I have the example here to play: 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>
My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"
For modern browsers
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%);
}
Tinker with it further on Codepen or on JSBin
For older browser support, look elsewhere in this thread.
After trying a lot of things I find a way that works. I share it here if it is useful to anyone. 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;
}
Here's a demo:
http://www.w3.org/Style/Examples/007/center-example
A method (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 method
(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>
The legitimate way to do that irrespective of size of the div for any browser size is :
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
Live Code
You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.
I forked your JSBin to apply it : 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;
}
I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.
My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.
So, with this HTML:
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
This CSS:
.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}
This jQuery might be useful:
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).