html/CSS how to make a div always center when the window is resized : <p>I have a navigation bar which I want it to always stay centered when the window is resized. The bar is on top of a picture which serves as the background of the website.
Here's the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
	&lt;style&gt;
		body {
			font-family: Trebuchet MS;
		}
      	.containermain {
			margin: auto;
		}
        .navibar {
			z-index: 1;
			position: absolute;
			background-color: #000000;
			border-radius: 5px;
			/*text-align: center;*/
			left: 200px;
			right: 80px;
			top:140px;
			width: 870px;
			/*max-width: 100%;*/
			margin: auto;
		}
     &lt;/style&gt;
&lt;/head&gt;
&lt;body style="margin:0px;"&gt;

	&lt;div class="containermain"&gt;
		&lt;img class="bg" src="bg.png" alt="background"&gt;
	&lt;/div&gt;
	
	&lt;div class="navibar"&gt;
			&lt;a class="button btnhome" href="x.html#home" target="_blank"&gt;home&lt;/a&gt;
			&lt;a class="button" href="x.html#portfolio" target="_blank"&gt;portfolio&lt;/a&gt;
			&lt;a class="button" href="x.html#blog" target="_blank"&gt;blog&lt;/a&gt;
			&lt;a class="button" href="x.html#contact" target="_blank"&gt;contact&lt;/a&gt;
	&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>I've tried several approach like "margin: auto", but nothing works, the navi bar is pinned to the place. Please help, thanks in advance!</p>
