怎麼讓span在div中垂直居中

1樓：飛喵某

1、首先開啟hbuilder軟體，新建一盒html檔案，寫入乙個外圍的div容器標籤，div中設定乙個span標籤：

2、然後在上方設定style標籤，在裡面設定div的字型，高度和寬度以及背景顏色的屬性，同時設定div的display屬性為table-cell，將它設定為**元素，然後設定縱向對齊方式vertical-align屬性為中間居中，在span標籤中不設定高度和寬度就可以垂直居中了：

3、最後開啟瀏覽器就可看到垂直居中的效果了：

2樓：君羊

當span用margin:auto auto(水平垂直自動居中)是，只有水平方向上的居中，垂直方向的卻沒有。這是因為塊元素的特性，塊元素是獨佔一行的，所以說整行都是它的範圍，如果不設定寬度，塊元素就會自己填充滿整行。

而此時設定了寬度（小於100%）時，它就有剩餘的（除寬度以外部分）寬度可以自己來分配，自己計算居中。

而不設高度時，塊元素是不會自動填充的，所以它是沒有高度來計算居中的。用絕對定位（父級要相對）來把塊元素的寬高拉到邊角點，整個上下左右都是它的範圍。再通過設定寬高，這時就有剩餘的寬高來居中了。

css如何實現span在div中水平居中

3樓：幻翼高達

2、在index.html中的標籤中，輸入css**：div 。

3、瀏覽器執行index.html頁面，此時span在div中成功水平居中了。

4樓：匿名使用者

span的父級div設定水平對齊樣式text-align: center;