垂直对齐文本[重复]答案

【问题标题】：Align the text vertically [duplicate]垂直对齐文本[重复]
【发布时间】：2020-01-21 06:11:54
【问题描述】：

如何在 div 的中间垂直对齐此文本？
我已经尝试使用relative/absolute更改位置，并更改段落的top和left，但它根本不起作用。

 div.roxo{
      background-color: purple;
      padding: 40px;
    }
    div.amarelo{
      background-color: yellow;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.vermelho{
      background-color: red;
      height: 300px;
      width: 50%;
      float: left;
    }
    div.verde{
      background-color: green;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.azul{
      background-color: blue;
      padding: 40px;
    }
    p{
       margin: 0;
       text-align: center;
       vertical-align: middle;
    }

<!DOCTYPE html>
   <html>
    <head>
    <title>Page Title</title>
   
    </head>
    <body>
      <div class="roxo">
    	  <p>roxo</p>
      </div>
      <div class="amarelo">
    	  <p>amarelo</p>
      </div>
      <div class="vermelho">
    	  <p>vermelho</p>
      </div>
      <div class="verde">
    	  <p>verde</p>
      </div>
      <div class="azul">
    	  <p>azul</p>
      </div>
    </body>
   </html>

【问题讨论】：

标签： html css alignment

【解决方案1】：

你可以使用 flexbox 来做到这一点。

div.roxo{
      background-color: purple;
      padding: 40px;
    }
    div.amarelo{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: yellow;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.vermelho{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: red;
      height: 300px;
      width: 50%;
      float: left;
    }
    div.verde{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: green;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.azul{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: blue;
      padding: 40px;
    }
    p{
       margin: 0;
       text-align: center;
       vertical-align: middle;
    }

<!DOCTYPE html>
  <html>
    <head>
    <title>Page Title</title>
   
    </head>
    <body>
      <div class="roxo">
    	  <p>roxo</p>
      </div>
      <div class="amarelo">
    	  <p>amarelo</p>
      </div>
      <div class="vermelho">
    	  <p>vermelho</p>
      </div>
      <div class="verde">
    	  <p>verde</p>
      </div>
      <div class="azul">
    	  <p>azul</p>
      </div>
    </body>
  </html>

只需添加：

display:flex;
justify-content:center;
align-items:center;

到您的 div CSS。
你可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/了解更多关于 flexbox 的信息

【讨论】：