1. div高度自適應的情況

? ? div在不設置高度的時候，會被里面的內容撐開，內容自動填充在div中，無論是一行內容還是多行內容，此時不需要設置垂直居中，內容自動在中間的，

? ? 想要看的更直觀些，只需要加上padding元素，內容四周便會留下空白，實現水平垂直居中的效果

? ? css代碼如下：

.demo{width: 200px;border: 1px solid red;padding: 20px;}

?HTML代碼如下：

<div class="demo">this is a test of margin this is a test of margin this is a test of margin this is a test of margin this is a test of margin </div>

效果如下所示：

2.div設置具體高度

? （1）內容只有一行

? ?設置div的line-height和div的高度一樣即可，這個大家都知道噠

? （2）內容不確定有幾行

? ?這時候需要在div中再加一層結構，用p標簽或者div都可以

? ?方法一：

? ?css代碼如下：

.demo{position: absolute;width: 200px; height: 200px; border: 1px solid red; }p{ position: absolute;width: 150px;top: 50%;left:50%;transform: translate(-50%,-50%);border: 1px solid black;}

?HTML代碼如下：

<div class="demo"><p>this is a test of margin this is a test of margin this is a test of margin this is a test of margin </p> </div>

? 效果如下：

? ?

方法二：若是不想用position：absolute這樣的脫離文檔流的樣式，那就可以嘗試模擬表格的方法

? ?設置父元素display：table，設置子元素display：table-cell，并設置vertical-align：middle即可

? ?css代碼如下：

.demo{width: 200px; height: 200px; display: table;border: 1px solid red; }p{ display: table-cell;vertical-align: middle;text-align: center;border: 1px solid black;}

HTML代碼如下：

<div class="demo"><p>this is a test of margin this is a test of margin this is a test of margin this is a test of margin </p> </div>

? ??效果如下所示：

? ??

? 此時子元素設置寬度是沒用的，寬度始終和父元素一致；

? 但是如果子元素設置高度的話，若是高度小于父元素則無效果，若是高度大于父元素則父元素的高度也相應增加到和子元素一樣的高度

?

方法三：

? 使用css3新增的flex布局完成。

? 設置父元素display:box; ?box-pack:center; ?box-orient:vertical;即可，記得要在前面加上瀏覽器前綴哦

? css代碼如下：

.box{width: 200px;height: 200px;border: 1px solid red;display: box;box-pack:center;box-orient:vertical;display: -webkit-box;-webkit-box-pack:center;-webkit-box-orient:vertical; }

HTML代碼如下：

<div class="box"><div>this is a testthis is a testthis is a test</div><div>this is another test for the second div </div> </div>

效果顯示如下：

?

（by新手小白的記錄）

?

轉載于:https://www.cnblogs.com/lynnmn/p/6141123.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的div中的内容水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。