¿Cómo centrar automáticamente un elemento fijo?

Actualmente estoy intentando mantener mi menú de encabezado fijo en la parte superior de la pantalla, incluso cuando estoy desplazando. El problema es que cada vez que configuro la posición como fija, pierde su centrado y el margen no tiene ningún efecto en ella. Quiero poder centrar el elemento y, al mismo tiempo, habilitarlo para que se centre automáticamente cuando la página se redimensiona o se ve con una resolución más pequeña.

El HTML y CSS en cuestión:

*{ margin: 0; padding: 0; } h1{ font: bold 20px Tahoma } h2{ font: bold 20px Tahoma } header, section, footer, aside, nav, article { display: block; } html{ height: 100%; background: rgb(143, 143, 143); } body{ width: 100%; display: flex; justify-content: center; } #big_wrapper{ margin: 0 0; display: flex; flex-direction: column; flex: 100%; } #top_header{ position: fixed; text-align: center; height: 120px; background: rgb(45,45,45); /*border-bottom: 15px solid rgba(79, 79, 79, 0.4);*/ border-radius: 8px; padding: 10px; /*box-shadow: rgb(30, 30, 30) 10px 10px 10px;*/ font-family: Impact, sans-serif; font-size: 40px; color: white; } #centering_example{ color: #a00d01; font-size: 45px; text-shadow: rgba(0,0,0,.5) -3px 3px 0; } #new_div{ display: flex; flex-direction: row; } #main_section{ position: relative; z-index: -1; top: 140px; max-width: 1200px; border-top-left-radius: 10px; border-top-right-radius: 10px; flex: 1; margin: auto; margin-top: 20px; padding: 20px; background: #3c3c3c; box-shadow: rgb(30, 30, 30) 10px 10px 10px; } #the_footer{ position: relative; top: 140px; max-width: 1200px; margin: auto; text-align: center; padding: 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top: 1px solid black; background: #3c3c3c; box-shadow: rgb(30, 30, 30) 10px 10px 10px; } #SELECTED{ display: inline-block; margin: 6px; margin-left: 5px; margin-right: 5px; border: 1px solid black; border-top: 1px solid #000000; border-top-color: rgba(0, 0, 0, 0.7); background: rgba(36,34,31, 0.6); box-shadow: rgba(0,0,0,1) 0 0 0;; padding: 9px 18px; border-radius: 8px; color: #f8f8f8; font-size: 16px; text-decoration: none; vertical-align: middle; } .media_button{ display: inline-block; margin: 6px; margin-left: 5px; margin-right: 5px; border: 1px solid black; border-top: 1px solid #000000; background: rgba(69, 69, 69, 0.8); padding: 3px 8px; border-radius: 8px; box-shadow: rgba(0,0,0,1) 3px 3px 0; color: #787878; font-size: 13px; text-decoration: none; vertical-align: middle; } .media_button:hover{ background: rgba(59,59,59, 0.6); box-shadow: rgba(0,0,0,1) 2px 2px 0; color: #f8f8f8; } .media_button:active { border-top-color: rgba(0, 0, 0, 0.7); background: rgba(36, 34, 31, 0.6); box-shadow: rgba(0, 0, 0, 1) 0 0 0; } .button{ display: inline-block; margin: 6px; margin-left: 5px; margin-right: 5px; border: 1px solid black; border-top: 1px solid #000000; background: rgba(69, 69, 69, 0.8); padding: 9px 18px; border-radius: 8px; box-shadow: rgba(0,0,0,1) 3px 3px 0; color: #787878; font-size: 16px; text-decoration: none; vertical-align: middle; } .button:hover{ background: rgba(59,59,59, 0.6); box-shadow: rgba(0,0,0,1) 2px 2px 0; color: #f8f8f8; } .button:active{ border-top-color: rgba(0, 0, 0, 0.7); background: rgba(36,34,31, 0.6); box-shadow: rgba(0,0,0,1) 0 0 0; } 
 

centering help

Home Games About us Blog

This is text for the index page of the website.


Intenta dándole una left:50%; y un margen izquierdo que es menos la mitad del ancho.

 left: 50%; margin-left: -200px; 

Violín actualizado:

http://jsfiddle.net/x3vh99vg/1/

Una mejor manera (sugerida por zgood en un comentario a continuación), que no utiliza márgenes codificados, es traducir el elemento en el eje x en un 50%;

 transform:translateX(-50%); 

Violín:

http://jsfiddle.net/x3vh99vg/2/

Podría envolver el contenido de su header en un div y luego darle a su header un estilo de display:flex junto con position:fixed .

Ver este violín .

HTML:

 

centering help

Home Games About us Blog

CSS:

 header{ position: fixed; width:100%; display: flex; justify-content: center; } 

Necesitas agregar:

 #top_header { top: 0; left: 0; right: 0; width: YOUR WIDTH; margin: 0 auto; } 

http://jsfiddle.net/5gLz8zur/