? ? ? ? 上一篇博文寫了div 中元素居中的N種常用方法，那么單個html元素：div（塊級元素代表），span（行內元素代表）中的文字如何水平垂直都居中呢？實現方法如下：
????????本文例子使用的 html body結構下的模型如下：
<body><div class="container">文字居中顯示</div>
</body>? ? ? ? 例子居中效果都如下圖：
注：當把div 換成其他塊級元素，如<p>或<h1>~<h6>時，以下方法仍然奏效。但當把div換成行內元素，如<span>時，第4種方法將失效。?
? ? ? ?1、彈性布局 設置容器項目在橫軸和縱軸上都居中對齊
<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}
</style>????????
????????2、使用 table-cell 顯示????????
????????????????使用 table-cell 可以實現 div 中文字的垂直居中，然后在使用text-align: center可實現水平居中
<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: table-cell;vertical-align: middle;text-align: center;}
</style>?????????3、使用 Grid 布局
????????????????display: grid + place-items: center
<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: grid;place-items: center;}
</style>????????? 4、使用 line-height
????????????????設置line-height的值和為div的height值，實現垂直居中，使用text-align實現水平居中。該方法只能使用于單行文本，如文本超過單行，文字將會溢出。且該方法不適用于span等行內元素
<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;line-height: 200px;}
</style>? ? ? ? ????????當多行文字時，如下：
<body><div class="container">文字居中顯示文字居中顯示文字居中顯示</div>
</body>
? ? ? ? 當用該方法用于span等行內元素時：為span設置的寬高將失效，因為默認情況下，行內元素無法設置寬度和高度，其寬度和高度都是由它們所包含的內容決定的。有關html塊級元素、行內元素、行內塊級元素的說明請看該篇博文：HTML 塊級元素、行內元素和行內塊級元素
<body><span class="container">文字居中顯示</span>
</body>
? ? ? ? 要想讓span等行內元素也實現div的效果，使用display：block 或?display：inline-block 即可
<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: block; /* 把span顯示變成塊級元素 */text-align: center;line-height: 200px;}
</style>
? ? ? ? 5、使用 text-align: center + padding? ?
? ? ? ? ? ? ? ?使用?text-align: center 可使文字水平居中，當沒有固定高度時，使用 padding-top 和?padding-bottom 相同高度即可實現垂直居中。當要求固定高度時，先看文字的高度，然后再計算出??padding-top 和?padding-bottom 相同的高度也能實現垂直居中
<style>/* 不限定高度時，container 不設置 height 屬性值使用 text-align: center + padding-top、padding-bottom 相同高度*/.container{width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;padding-top:50px;padding-bottom:50px;}
</style>
<style>/* 限定高度時(如div總高度限定 200px)，container 不設置 height 屬性值使用 text-align: center + padding-top、padding-bottom 要根據div高度減去文字高度再平分剩余的高度假如文字高度占20px,那么padding-top、padding-bottom 都是90px*/.container{width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;padding-top:90px;padding-bottom:90px;}
</style>
-
?組合上篇 div找那個元素居中和本篇html元素居中的方法綜合實現子div在父div中居中顯示并且子div中的文字居中
<head><meta charset="utf-8" /><title></title><style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}.box{width: 150px;height: 150px;background: #55a9ff;display: flex;justify-content: center;align-items: center;}</style></head>
<body><div class="container"><div class="box">文字居中顯示</div></div>
</body>
? ? ? ? 注：box 中可使用上述第1,第3,第4，第5種方法實現組合文字居中，第2種display: table-cell講失效?
以上方法如有錯誤請各位不吝指教，如以后有別的方法將會往下繼續添加，各位有其他方法可留言告知。
