Alignment of text vertically

Question

I’m trying to align the text to the center of the screen, I tried to use the transform:translateY(-50%) with the top:50% in position:absolute, but it didn’t work, I’d like to know how to fix it, and if possible, some functional example.

*The edge at the top of the element decreases by decreasing the width of the screen, whether or not the height increases.

#carrossel-principal{
    	position:relative;
    	height:100%;
    	overflow-y:hidden;
    }
    .carousel-caption{
    	font-family:"Open Sans",sans-serif;
    	overflow-y:hidden;
    	box-sizing:border-box;
    	padding:0;
    	position:absolute;
    	top:0;
    	height:100%;
    }
    .caption-holder{
    	vertical-align:middle;
    	position:absolute;
    	width:100%;
    	padding:0;
    	margin-top:50%;
    	transform:translateY(-50%);
    }

<div id="carrossel-principal" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
   <div class="item active">
      <img src="img/banner_1.jpeg" alt="banner 1">
      <div class="carousel-caption">
         <div class="caption-holder">
            <h2>Nossa missão é fazer o bem!</h2>
            <p>Você também pode nos ajudar</p>
         </div>
      </div>
   </div>
   <div class="item">
      <img src="img/banner_2.jpg" alt="banner 2">
      <div class="carousel-caption">
         <div class="caption-holder">
            <h2>Doar é mais do que abrir mão de algo</h2>
            <p>é estender a mão a alguém</p>
         </div>
      </div>
   </div>
   <div class="item">
      <img src="img/banner_3.jpg" alt="banner 3">
      <div class="carousel-caption">
         <div class="caption-holder">
            <h2>Se você não tem nada para doar</h2>
            <p>Doe um gesto de carinho a quem precisa</p>
         </div>
      </div>
   </div>
</div>
  </div>

Answer 1

remembering that the property top, left, right and bottom are referring to the parent element, so to have the expected behavior, this must occupy the entire page.:

html, body {
    position: relative;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

Second point, you will not center the text, but rather a div or another html element. just note the fact that it needs to be a direct child of body.

Your CSS rule is right for vertical alignment.:

div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

for horizontal alignment, you will use the property left and translateX.

div {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

if you want to center the content on the page, you must combine the two rules.

html, body {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  padding: 5px;
  width: 360px;
  background-color: white;
  box-shadow: 0px 0px 5px black;
  border-radius: 5px;
}

<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium sem in dolor aliquet, sed ornare sapien ultrices. Pellentesque libero felis, cursus faucibus cursus efficitur, cursus ac leo. Sed posuere.</div>

Answer 2

Essentially already answered in the question how best to center an element vertically and horizontally?, although the AP says it needs to "align the text", in the code posted that "text" lies within an element.

In addition to the solutions presented here, depending on the support that is giving, can use floppy boxes:

div {
  align-items: center;
  justify-content: center;
  flex-direction: column; 
  display: flex;
  
  /* Regras somente para exibir a caixa,
     ñ tem importância para centralizar o texto.
   */
  height: 350px;
  background: rgba(0,0,0,.1)
}

div h2 {
  display: inline-block
}

<div>
  <h2>Doar é mais do que abrir mão de algo</h2>
  <p>é estender a mão a alguém</p>
</div>

Answer 3

Just take the CSS.

#carrossel-principal {
  position: relative;
  height: 100%;
  overflow-y: hidden;
}
#carrossel-principal .item {
  position: relative;
}
.carousel-caption {
  font-family: "Open Sans", sans-serif;
  overflow-y: hidden;
  box-sizing: border-box;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  font-size: 14px;
}
.caption-holder {
  width: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: table;
}

<div id="carrossel-principal" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="banner 1">
      <div class="carousel-caption">
        <div class="caption-holder">
          <h2>Nossa missão é fazer o bem!</h2>
          <p>Você também pode nos ajudar</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="banner 2">
      <div class="carousel-caption">
        <div class="caption-holder">
          <h2>Doar é mais do que abrir mão de algo</h2>
          <p>é estender a mão a alguém</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="banner 3">
      <div class="carousel-caption">
        <div class="caption-holder">
          <h2>Se você não tem nada para doar</h2>
          <p>Doe um gesto de carinho a quem precisa</p>
        </div>
      </div>
    </div>
  </div>
</div>