CSS：如何對齊水平居中和垂直居中的文本內容？

Question

如何在div水平居中和垂直居中的內部對齊文本內容？

   <div style="height: 300px;">
     <p>Envision various details for your big day with help from our photo catalog, which features images filtered by category. See actual works from suppliers to help you make decisions.</p>
   </div>

Answer 1

你需要使用display: table-cell; 和vertical-align: middle; 具有text-align: center;屬性text-align: center; 以及垂直和水平居中對齊文本

演示

div {
    border: 1px solid #f00;
    display: table-cell;
    text-align: center;
    vertical-align: middle
}