How to Align Entire HTML Body to the Center

How to center body on a page?

Also apply text-align: center; on the html element like so:

html {
  text-align: center;
}

A better approach though is to have an inner container div, which will be centralized, and not the body.

How to align body of the webpage to center?

You can wrap all content in a div, then you would set a width on that div and set the left and right margin to auto.

<head>
    <style>
        .container {
            width: 75%;
            margin-left: auto;
            margin-right: auto;
    </style>
</head>
<body>
    <div class="container">
    <!-- other content -->
    </div>
</body>

CSS to center entire relative body horizontally, without wrapper or scrollbars?

You just need absolute positioning + transform:translate style centering.

#wider {  width: 10000px;  border: 1px solid black;  text-align: center;}
body {  position:absolute;  left:50%;  transform: translate(-50%);  margin:0;  overflow-x:hidden;}

<html>  <body>  Overflow to left    <div id="wider">Center-screen</div>  </body></html>

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>

Centering body content HTML and CSS

Try adding

margin: 0 auto;

to the divs you want centered

Also, your navigation bar is (container_header) is too wide for smaller viewports and pushing your layout out of whack. Take a look at collapsing the navbar for smaller devices to avoid this.

How to set center elements in body without centering all elements within main elements?

your code:

.leftColumn, .centerColumn, .rightColumn {
    margin: 16px;
    border: 2px solid var(--medium) !important;
    background-color: white !important;
    margin-top: 98px !important;
    display: inline-block;
}

solution:

.leftColumn, .centerColumn, .rightColumn {
    margin: 16px;
    border: 2px solid var(--medium) !important;
    background-color: white !important;
    margin-top: 98px !important;
    display: inline-block;
    text-align: left; /* setting alignment inside */
}

plus:

body{
   text-align: center; /*  setting alignment outside */
}

Comment if it doesn't work :)

Center align HTML Body contents vertically and horizontally

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);}

http://jsfiddle.net/47x60k4w/show/