div中的「內容」水平垂直居中

2022-09-15 06:00:12 字數 1309 閱讀 8624

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

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

.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

(1)內容只有一行

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

(2)內容不確定有幾行

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

*方法一:

.demo

pthis is a test of margin

this is a test of margin

this is a test of margin

this is a test of margin

*方法二:若是不想用position:absolute這樣的脫離文件流的樣式,那就可以嘗試模擬**的方法設定父元素display:table,設定子元素display:table-cell,並設定vertical-align:middle即可

.demo

pthis is a test of margin

this is a test of margin

this is a test of margin

this is a test of margin

此時子元素設定寬度是沒用的,寬度始終和父元素一致;

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

*方法三:使用css3新增的flex布局完成,設定父元素display:box; box-pack:center; box-orient:vertical;即可,記得要在前面加上瀏覽器字首哦

.box

this is a test

this is a test

this is a test

this is another test for the second div

div中內容水平垂直居中

1.div高度自適應的情況 div在不設定高度的時候,會被裡面的內容撐開,內容自動填充在div中,無論是一行內容還是多行內容,此時不需要設定垂直居中,內容自動在中間的,想要看的更直觀些,只需要加上padding元素,內容四周便會留下空白,實現水平垂直居中的效果 css 如下 demohtml 如下 ...

div 中的內容水平垂直居中

要讓div中的元素垂直居中,只需要設定div容器的line height和height一致即可。再通過設定text align center 達到水平居中。content style class content p要垂直居中顯示p div body 將div容器設定為display table 然後...

div中的內容水平垂直居中

1.div高度自適應的情況 div在不設定高度的時候,會被裡面的內容撐開,內容自動填充在div中,無論是一行內容還是多行內容,此時不需要設定垂直居中,內容自動在中間的,想要看的更直觀些,只需要加上padding元素,內容四周便會留下空白,實現水平垂直居中的效果 css 如下 demohtml 如下 ...