1.在一個盒子中我們怎么讓文本水平，垂直居中顯示
<body>
<div class="box">
<p>文本水平,垂直居中</p>
</div>
</body>
可以看到此時文本默認是在盒子的左上角顯示的，可以添加行高（line-height 值與盒子高度一樣就行），和文本對齊方式設(shè)置為水平居中，代碼如下：
.box>p {
width: 100%;
height: 50px;
/* 這里為了方便顯示效果，加了邊框 */
border: solid 2px pink;
/* 段落標簽中文本居中 */
/* 設(shè)置行高(與盒子高度一樣就行) */
line-height: 50px;
text-align: center;
}?文章來源地址http://www.zghlxwxcb.cn/news/detail-481043.html
?2.怎么讓盒子中的元素居中顯示
<body>
<div class="box">
<div>元素居中</div>
</div>
</body>
?這里我們可以看到，盒子中的元素也是默認左上角對齊的
可以為元素添加定位（position:absolute;）這里記得給父盒子加上先對定位（position：relative），然后調(diào)整邊偏距 left：50%，top：50%；
這里的意思是元素距離盒子的左，上各50%（這個50%是相對于父盒子的寬高）
.box>div {
width: 50px;
height: 50px;
/* 這里為了方便顯示效果，加了邊框 */
border: 2px solid blue;
/* 添加定位（子絕父相） */
position: absolute;
/* 相對于父盒子定位 */
left: 50%;
top: 50%;
為什么這里元素并沒有在正中間呢？ 這是因為里面的盒子只是向右，向下移動了父盒子的寬高的50%，還有盒子自身的高度并沒有計算?
這里有兩種方法可以調(diào)整：
1. 調(diào)整盒子外邊距（margin）
margin-left：-25px;margin-top: -25px; 25px是元素盒子的寬高的一半，這里不可以寫50%喲。
/* 1.添加外邊距 */
margin-top: -25px;
margin-left: -25px;2. 利用css2D屬性transform來調(diào)整
transform: translate(-50%,-50%); 這里是相對于元素盒子的50%。
/* 2.利用2D移動（transform:translate()） */
transform: translate(-50%, -50%);
文章來源：http://www.zghlxwxcb.cn/news/detail-481043.html
?
到了這里，關(guān)于html 怎么設(shè)置文本對齊，文本間距，盒子居中顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
