二個方法如何讓div內的文字置中

CSS Center text (Horizontal and Vertical) inside a DIV block

by ken tsai

HTML

<h2>透過display: table-cell來讓文字置中</h2>

<div class="div1">hi</div>

<hr>

<h2>透過line-height讓文字置中</h2>
    
<div class="div2">hi 2</div>

CSS

.div1{
    height:90PX;
    width:90PX;
    border:1px solid silver;
    
    display: table-cell;
    text-align:center;
    vertical-align:middle;
}

.div2{
    height:90PX;
    width:90PX;
    border:1px solid silver;
    
    text-align:center;
    vertical-align:middle;
    line-height: 90px;       /* the same as your div height */
    
}