Tutorial WordPress: Cómo centrar verticalmente elementos del header con Flexbox

Introducción: por qué usar Flexbox para centrar elementos del header en WordPress

En muchos temas de WordPress el header contiene varios bloques —logo o branding, menú de navegación, y widgets o iconos— que deben estar alineados verticalmente para lograr un aspecto profesional y consistente en distintas resoluciones. Flexbox es la herramienta más apropiada para centrar verticalmente estos elementos porque:

Es sencillo: una sola propiedad (align-items) suele bastar.
Responde bien: permite reorganizar el header en móviles con media queries.
Evita hacks: no hace falta line-height fijo ni posicionamiento absoluto en la mayoría de los casos.

Requisitos previos

Acceso al tema (child theme recomendado) o al personalizador para añadir CSS.
Conocimientos básicos de CSS y de la estructura del header del tema (header.php o plantillas parciales).
Herramientas de desarrollador del navegador para inspeccionar el HTML y probar estilos en vivo.

1) Identificar la estructura HTML del header

Antes de aplicar Flexbox revisa el marcado: busca el contenedor principal del header (ej. .site-header, header#masthead) y las columnas internas (.site-branding, .main-navigation, .header-widgets). Un ejemplo típico:

ltheader class=site-headergt
  ltdiv class=site-brandinggt
    lta class=custom-logo-link href=lt?php echo home_url() ?gtgt
      ltimg src=... alt=Logogt
    lt/agt
  lt/divgt
  ltnav class=main-navigationgt
    lt!-- wp_nav_menu output --gt
  lt/navgt
  ltdiv class=header-widgetsgt
    lt!-- buscador, iconos, etc. --gt
  lt/divgt
lt/headergt

2) Reglas básicas de Flexbox para centrar verticalmente

Aplica display:flex al contenedor del header y usa align-items:center para centrar verticalmente todo su contenido. Si quieres separar logo y navegación usa justify-content:space-between.

/ Contenedor principal /
.site-header{
  display: flex
  align-items: center        / centra verticalmente los hijos /
  justify-content: space-between / separa a los extremos /
  padding: 0 1rem
  min-height: 70px          / altura mínima del header /
  box-sizing: border-box
}

/ Controla el tamaño del logo para que no sobresalga /
.site-branding img{
  max-height: 52px
  height: auto
  width: auto
  display: block
}

Notas

align-items:center centra según la línea base del elemento flex y su altura.
Usar min-height permite que el header crezca si el contenido lo necesita (por ejemplo en pantallas pequeñas).

3) Escenarios comunes y soluciones

a) Logo a la izquierda, menú a la derecha

Esta es la configuración más habitual y funciona con las reglas básicas mostradas arriba. Para que el menú sea horizontal y sus ítems queden centrados verticalmente:

.main-navigation ul{
  display: flex
  gap: 1rem         / separación entre ítems /
  margin: 0
  padding: 0
  list-style: none
  align-items: center / centra las opciones dentro del menú /
}

.main-navigation a{
  display: inline-block
  padding: .5rem .75rem
  line-height: 1
}

b) Diseño en tres columnas: izquierda (logo), centro (nav), derecha (widgets)

Para centrar verticalmente y mantener el nav centrado en el eje horizontal, basta con dar flex:1 a la columna central o jugar con márgenes automáticos:

.site-header{
  display: flex
  align-items: center
}

/ la columna central ocupa el espacio disponible /
.main-navigation{
  flex: 1 1 auto
  display: flex
  justify-content: center
}

.header-widgets{
  flex: 0 0 auto / tamaño según su contenido /
}

c) Cuando el menú se envuelve (wrap) y rompe el centrado

Si el menú se ajusta a varias líneas en pantallas pequeñas y quieres que cada columna del header siga centrada verticalmente, usa align-items:flex-start en el header y aplica align-items:center en cada columna interna según convenga:

/ permite que las columnas controlen su propio centrado /
.site-header{
  display: flex
  align-items: flex-start / evita que el header global se vea forzado por el wrap /
  flex-wrap: wrap
  gap: 0.5rem 1rem
}
.site-branding, .main-navigation, .header-widgets{
  display: flex
  align-items: center / cada columna controla su centrado /
}

4) Adaptación móvil: cambiar la dirección y re-centraje

En móviles es habitual apilar verticalmente los elementos. Cambia flex-direction y centra los elementos:

@media (max-width: 768px){
  .site-header{
    flex-direction: column
    align-items: center / centrado horizontal cuando se apila /
    gap: .5rem
    padding: .75rem 1rem
  }
  .main-navigation{
    width: 100%
    justify-content: center
  }
}

5) Control del tamaño del logo y escala responsiva

Para que el logo no rompa el layout al cambiar altura del header:

.site-branding img{
  max-height: 60px
  width: auto
  height: auto
  object-fit: contain
}

/ opcional: reducir logo en móviles /
@media (max-width: 480px){
  .site-branding img{
    max-height: 40px
  }
}

6) Ejemplo práctico completo (header con logo, nav centrado, widgets a la derecha)

ltheader class=site-headergt
  ltdiv class=site-brandinggt
    lta class=custom-logo-linkgtltimg src=logo.png alt=Mi webgtlt/agt
  lt/divgt
  ltnav class=main-navigationgt
    ltulgt
      ltligtlta href=#gtIniciolt/agtlt/ligt
      ltligtlta href=#gtServicioslt/agtlt/ligt
      ltligtlta href=#gtContactolt/agtlt/ligt
    lt/ulgt
  lt/navgt
  ltdiv class=header-widgetsgt
    lt!-- iconos, buscador --gt
  lt/divgt
lt/headergt

.site-header{
  display:flex
  align-items:center
  justify-content:space-between
  padding:0 1rem
  min-height:72px
}

.site-branding img{ max-height:52px display:block }

.main-navigation{ flex:1 1 auto display:flex justify-content:center }
.main-navigation ul{ display:flex gap:1rem padding:0 margin:0 list-style:none align-items:center }

.header-widgets{ flex:0 0 auto display:flex align-items:center gap:.5rem }

7) Añadir el CSS en WordPress

Personalizador: Apariencia → Personalizar → CSS Adicional — ideal para pruebas rápidas.
Child theme: Añade el CSS en style.css del child theme para cambios permanentes.
Enqueue: Crear un archivo CSS y registrarlo/enqueue en functions.php si prefieres mantenerlo separado.

Ejemplo de cómo encolar un archivo CSS desde functions.php (child theme):

lt?php
function mi_tema_child_styles() {
  wp_enqueue_style( mi-header-flex, get_stylesheet_directory_uri() . /css/header-flex.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_tema_child_styles )
?gt

8) Consideraciones de accesibilidad y semántica

Usa ltnavgt y atributos aria-label si tienes varios menús (ej. aria-label=Menú principal).
Asegúrate de que los enlaces son foco accesibles y visibles al tabular (outline en :focus).
Comprueba el contraste entre texto y fondo del header.

9) Depuración: cómo encontrar por qué no se centra algo

Inspecciona el contenedor: ¿tiene display:flex aplicado? ¿otro selector lo está sobrescribiendo?
Revisa el tamaño de los hijos: un elemento con height fijo o margin superior puede romper el centrado.
Comprueba si hay align-self en algún hijo que anule el comportamiento de align-items.
Si el header envuelve (flex-wrap), revisa align-items y los estilos de cada columna.

10) Errores comunes y soluciones rápidas

Error: No se ve centrado. Solución: aplica display:flex al contenedor correcto (a veces hay otro wrapper).
Error: Logo sobresale. Solución: limitar con max-height y object-fit o escalar SVG con height/width.
Error: En móvil todo se amontona. Solución: usar media queries para cambiar flex-direction a column y controlar espacios con gap/padding.

Conclusión

Flexbox es la forma más directa y robusta para centrar verticalmente los elementos del header en un tema de WordPress. Con unas pocas reglas —display:flex y align-items:center— y algún ajuste puntual (max-height para logos, flex en columnas, media queries) obtendrás un header visualmente equilibrado y adaptable. Implementa los cambios en un child theme o mediante el personalizador y prueba en varias resoluciones para garantizar un resultado óptimo.

SushiHost