How to center an element in the middle of the browser window?
I surprised that nobody said about position=fixed. It makes exactly what I asked and works in all "human" browsers and IE since 7.
Positioning div element at center of screen
The easy way, if you have a fixed width and height:
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.
How do I center a div in the middle of the page, even if I change the window size?
Maybe it is not working for you as container
is absolute and hence the body
has zero height.
Add
height: 100%
tohtml
andbody
first.Use centering method for
absolute
ly positioned element usingtransform
tocontainer
:top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Let me know your feedback on this. Thanks!
html,body { height: 100%;}* { margin: 0; padding: 0;}#container { background-color: black; border-radius: 10px; padding: 5px; display: block; margin: 0 auto; border-width: 1px; border-color: black; border-style: solid; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.light { height: 100px; width: 100px; display: block; border-radius: 50%; margin: 10px; border-width: 5px; background-color: grey;}
<body> <div id="container" onclick="changeColor()"> <div id="green" class="light"></div> <div id="yellow" class="light"></div> <div id="red" class="light"></div> </div></body>
Center div in middle of site
Added everything to a single html file. Commented some of the existing css which defined margin for the container. And added
width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;
to make it center. The basic idea is to containe the the div and move the div to the center of the container.
Happy hacking. Cheers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Super Mario</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.nav a {
padding: 8px 8px 30px 65px;
text-decoration: none;
font-size: 35px;
color: #818181;
display: block;
transition: 0.3s;
font-weight: 500;
}
.nav a:hover {
color: #f1f1f1;
}
.nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.menu {
font-size: 1.8vw;
position: absolute;
font-weight: bolder;
}
#main {
transition: margin-left .5s;
/* padding: 10px; */
}
@media screen and (max-height: 450px) {
.nav {
padding-top: 15px;
}
.nav a {
font-size: 18px;
}
}
.headerText {
text-align: center;
}
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 1800px;
/* height: 450px; */
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #2596be;
margin-top: 50px;
text-align: center;
flex-direction: column;
border-style: solid;
border-width: 10px;
/* margin-bottom: 350px; */
max-width: 1800px;
/* margin-left: auto;
margin-right: auto; */
}
.title {
font-size: 50px;
font-weight: bolder;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
min-width: 70%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
margin-top: 230px;
}
.topnav a {
float: left;
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 23px;
border-left: 1px solid;
border-right: 1px solid;
text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.menu {
cursor: pointer;
}
.aboutp {
width: 1000px;
text-align: center;
display: block;
margin: auto;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
max-width: 700px;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
max-width: 768px;
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
min-height: 50%;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
max-width: 1800px;
margin: auto;
}
body {
background-color: saddlebrown;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("nav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
</head>
<body>
<div id="nav" class="nav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="menu/info.html">About</a>
<a href="menu/history.html">History</a>
</div>
<span class="menu" onclick="openNav()">☰ Menu</span>
<div id="main" style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
<div class="marioHeader" style="width: 70%">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
<a href="menu/info.html">About</a>
<a href="menu/history.html">History</a>
</div>
</div>
</div>
</div>
</body>
</html>
How to set page content to center of the browser?
Put all the content inside a div, set its class to container
:
<div class="container">
...
</div>
Then using css set its margins to auto:
.container{
margin:0px auto;
width: 600px;
}
have a look at this jsfiddle
EDIT
check this new fiddle , the menu
css doesn't neet all of what you wrote, should be something like:
#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
How to align a button to the center of the screen html
You should use something like this:
<div style="text-align:center">
<input type="submit" />
</div>
Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.
<input type="submit" style="width: 300px; margin: 0 auto;" />
How to align a div to the middle (horizontally/width) of the page
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Related Topics
How to Align Two Divs Horizontally
Firefox Linux (Centos) Responsive Design Image Scaling
Center Aligning a Fixed Position Div
What Are the Ways to Make an HTML Link Open a Folder
Nesting <A> Inside <Button> Doesn't Work in Firefox
How to Position a Div Scrollbar on the Left Hand Side
Changing <Select> Highlight Color
Curved Div With Transparent Top
Media Queries For Different Zoom Levels of Browser
Font Awesome Icon Inside Text Input Element
Required Attribute Not Work in Safari Browser
Customizing Increment Arrows on Input of Type Number Using CSS