Central message box on any screen resolution
Center horizontally
To center the div horizontally, you can use margin: auto auto; width: 500px
where width is whatever width you want.
HTML:
<div id="content">
Some content
</div>
CSS
#content {
width: 200px;
margin: auto auto;
background-color: #CCC;
}
Center screen with fixed dimensions
If you can fix the height and width of the content then it is possible to center the div both horizontally and vertically using just css. This is achieved by dragging the content to another div, then positioning your div content top: 50%
, and then subtracting half of its height:, margin-top: -100px
assuming the height was 200px. See example below:
HTML:
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
CSS
#wrapper {
position: relative;
background-color: #EEE;
width: 200px;
height: 200px;
font-size: 10px;
}
#content {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
background-color: #DDD;
}
Pretend it is vertically centered
You can also specify fixed margin-top
(or top
s position: absolute
) so that it looks vertically centered on most desktop and laptop screens.
HTML:
<div id="content">
Some content
</div>
CSS
#content {
width: 200px;
margin: 100px auto;
background-color: #CCC;
}
Use Javascript
There is no way to vertically center content with arbitrary height using only css. In this case, you will need to use Javascript to position the div .:
Main idea:
- you calculate the height of the content when you need to show the content, or when the content is loading.
- Then change any of the many css properties to place the div in the vertical center.
My personal preference is to use position: absolute
with a property top
. You can also use margin-top
, but you probably don't want this div to take up space in the box if you have other content on the page.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var el = $('#content');
var elWidth = el.width();
var elHeight = el.height();
el.css({
position: 'absolute',
top: (windowHeight / 2) - (elHeight / 2),
left: (windowWidth / 2) - (elWidth / 2),
});
});
</script>
<style>
#content {
width: 200px;
height: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
Some content
</div>
</body>
</html>
Use any of the available Javascript "plugins"
There are many CSS frameworks on the Internet that provide the boilerplate CSS that we use on most websites. And some of them also help with such common problems with small Javascript plugins. I personally know that Twitter Bootstrap provides a Modal plugin that you can use for this purpose. There are also many jQuery plugins with the sole purpose of centering content on a page.
Conclusion
While there are tons of options for this, I'm sad to see that CSS still doesn't support it. Maybe it's difficult to do it in different scenarios, I don't know. Of the options I mentioned above, I think the Javascript option is the most versatile, and with today's browser speeds and the likelihood that nobody will disable Javascript in their browser, this would be the best way to go.
source to share
I just saw this after reading about how to do it on the CSS Techniques page .
Basically, define some CSS:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
ADVANTAGES:
-
Cross browser (including IE8-10)
-
No special markup, minimal styles
-
Responsive with percent and min- / max -
-
Use one class to center any content
I didn't have time to test this, but I wanted to post it here, hoping it helps others.
source to share
This is what you are looking for http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/
You can easily do this with jquery! Or with the css solution given on this site!
source to share
You must provide us with your tried code. Let's assume you have HTML code like below:
<div id="message">
Hello World!
</div>
CSS code:
#message {
width: 100px;
height: 100px;
margin: 50px auto;
}
Then your message box will be 100x100 and 50px at the top of your screen and automatically aligned to the center of your screen.
source to share