Center text in header [duplicate]

Navigation
2

Hello everyone. I created a header with 100% of screen size (regardless of screen size) like this: 

header {
  background-image: url('img/background.jpg');
  height: 100vh;
  width: 100%;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>

I need my text to be at the center of this header (horizontal and vertical).

    
asked by anonymous 23.05.2018 / 22:00

2 answers

1

You can use transform: translateY() to center vertically and text-align: center to center horizontally: 

header{
   background-image: url('img/background.jpg');
   height: 100vh;
   width: 100%;
   background-color: yellow;
 }

.texto-header{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   text-align: center;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>
    
23.05.2018 / 22:09
0

Try this below, I've used display:flex and its properties in class texto-header : 

header {
  background-image: url('img/background.jpg');
  height: 100vh;
  width: 100%;
}

.texto-header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;  
  align-items: center;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>
    
23.05.2018 / 22:23
Check that all elements are equal Responsiveness - Android studio