Center Div on The Middle of Screen

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 to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How to position a div in the middle of the screen when the page is bigger than the screen

just add position:fixed and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

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>

Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

Change the position attribute to fixed instead of absolute.

Trying to center div horizontally and vertically in screen

Note: If you're trying to center a div horizontally and vertically I would suggest looking into flexbox. You'll still need to provide fallback support, but flexbox is the future and it's amazing.
Update: flexbox is supported by all modern browsers now.

You need to give the div a static width and height first of all.

Second, you have to set position: absolute; and left: 50%; top: 50%; then you must do a margin-left and margin-top that are HALF of the height and width. It will then display correctly.

CSS:

.centerDiv{
  width: 800px;
  border-radius: 5px;
  background: #ccc;
  padding: 10px;
  height: 50px;
  position: absolute;
  margin-top: -25px;
  margin-left: -400px;
  top: 50%;
  left: 50%;
}

http://jsfiddle.net/wJ7dY/

P.S. I changed your styling a bit so you could actually read the text. Hope this helps!