Center Elements In Raw HTML And CSS

Center This [source]

The old “how do I center this f***ing thing in raw CSS and HTML” huh? Well, it’s way more simplistic than it seems if you are new to CSS.

I don’t understand why many resources online make it appear more difficult than it is. There are already troves of fantastic tutorials on HTML and CSS across the web, W3 being one of the most prevalent.

I will go into more detail using other methods like grid and flexbox in another post. Keep it simple at first if you are learning.

Basic Example

In its most basic form, all you need is a container to put the element you are trying to center in, then set the element’s margin to auto.

margin: 0 auto;

To take it a bit further, create a CSS class so you can easily apply the margin to multiple elements.

The HTML

<head>
  <title>Raw CSS HTML</title>
  <link rel="stylesheet" type="text/css" href="center-div-style.css">
</head>
<body>
  <div class="center-me size-adjusted">
    <p>I am in a centered div!</p>
  </div>

  <div class="not-centered size-adjusted">
     <p>I am NOT in a centered div!</p>
  </div>
</body>

The CSS

.center-me {
  margin: 0 auto;
}
/* Just to make the div visible */
.size-adjusted {
  max-width: 15rem;
  height: 12rem;
}

Full Example With Content Wrapper

You can center more than div elements with the margin auto trick. Here is an example to center everything in the main element. This allows for a more uniform content feel which can be applied to every page.

As a side note, preference for adding CSS to a main tag in this manner will vary, so I’m not saying this is the best practice, it’s just an example. You could add the .center-me class to the main element instead (or any element) to avoid duplication.

Full Example On Github

The HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Raw CSS HTML</title>
    <link rel="stylesheet" type="text/css" href="center-div-style.css">
  </head>
  <body>
    <main class="main-content">
      <div class="center-me size-adjusted">
        <p>I am in a centered div!</p>
      </div>

      <div class="not-centered size-adjusted">
        <p>I am NOT in a centered div!</p>
      </div>
    </main>
  </body>
</html>

The CSS

* {
  margin: 0;
  padding: 0;
}

html {
  width: 100vw;
  height: 100vh;
}

.main-content {

  margin: 0 auto;

  max-width: 900px;
  height: 100%;

  padding-top: 20px;
  padding-bottom: 20px;
  background-color: lightgray;
}

.center-me {
    
  margin: 0 auto;

  background-color: lightgreen;
}

.not-centered {
  background-color: lightcoral;
}

/* Just to make the div visible */
.size-adjusted {
  max-width: 15rem;
  height: 13rem;
}