How to Put a Div in Center of Browser Using CSS

How to put a div in center of browser using CSS?

HTML:

<div id="something">... content ...</div>

CSS:

#something {
    position: absolute;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}

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/.

Center a div in CSS

The text-align: center; only centers the element's inline contents, not the element itself.

If it is a block element (a div is), you need to set margin: 0 auto;, else if it is an inline element, you need to set the text-align: center; on its parent element instead.

The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto (of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width (either fixed or relative), else it cannot figure where to start and end.

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 can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

auto - CSS reference | MDN
margin - CSS reference | MDN
What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

Cross browser div center alignment using CSS

Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.

#content {
    width: 300px;
    margin: 0 auto;
}

This is perfectly crossbrowser compatible.

Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.

Here's a copy'n'paste'n'runnable example:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2935404</title>
    </head>
    <style>
        #content {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -150px; /* Negative half of width. */
            margin-top: -100px; /* Negative half of height. */
            border: 1px solid #000;
        }
    </style>
    <body>
        <div id="content">
            content
        </div>
    </body>
</html>

That said, vertical centering is usually seldom applied in real world.

If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.

How can I vertically center a div element for all browsers using CSS?

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

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 Put a Div in Center of Browser Using CSS