Menu
How can I position a web page in the middle of the screen? like the pages on stackoverflow web site? I'm writing the masterpage of my website and I want to use HTML and css to position the master page in the middleof the screen and then build the inside positioning block using css. But I can't get my page to be visualized in the middle!
Thank you!
804
Using the <center></center> tags One way to center text or put it in the middle of the page is to enclose it within <center></center> tags. Inserting this text within HTML code would yield the following result: Center this text!
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
To place your HTML <div> element in the middle of the screen, you need to use the CSS position property with its "fixed" value. This will keep the <div> in view even when you scroll down. In the example below, we set both the top and left properties to "50%" and add width and height.
You can use margins to position it in the center horizontally.
Given this html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="page"> ... content ... </div>
</body>
</html>
The CSS can be as simple as:
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
You also need to make sure you have a valid doctype for this to work.
129
Create a <div> in your <body> like so:
<body>
<div id="main">
<!-- ... -->
</div>
</body>
And add the following CSS:
body {
text-align: center; /* IE */
}
#main {
margin-left: auto;
margin-right: auto;
text-align: left; /* IE */
width: XXX; /* Fill this out. */
}
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
