不定寬高的div中 文字垂直居中

2021-08-16 04:51:56 字數 579 閱讀 3469

最近公司的專案裡面有個要調樣式的頁面 , 可能是很長很長時間沒有寫過css樣式方面的東西了.吐槽一下我自己,只是乙個簡單的介面就讓我苦惱了很久

需求:在不定寬高的div中 文字垂直居中

div1的寬高都是百分比

div2的寬高也都是百分比

div3把文字包起來,不設定寬高,由內容撐開

div2 設定

position: relative;
div3 設定

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

裡面的文字可能會換行,那就強制文字不換行

給裡面的 p 標籤 設定

white-space:nowrap;

不定寬高的div如何垂直居中

話不多說,先上效果圖 複製 採用絕對定位 wap center 複製 flex布局 對進行布局的父容器的display進行設定 wap center 複製 布局 父元素設定為 display table cell vertical align middle text align center 子元素...

css 不定寬高的div水平 垂直居中問題

1 相容最佳 body,html box content 第一種方法也是出現的比較早的了。相容拿ie來做參照 第一種方法ie7以上都能使用,ie7及ie7以下都會出現問題。2 實現最佳 body,html box content 第二種利用transform進行元素偏移。這方法功能很強大,也比較靈活...

css實現不定寬高的div水平 垂直居中

一共有三個方案 1,第一種方案主要使用了css3中transform進行元素偏移,效果非常好 這方法功能很強大,也比較靈活,不僅僅侷限在實現居中顯示。相容方面也一樣拿ie來做比較,第二種方法ie8以上都能使用。ie8及ie8以下都會出現問題。body div id box div id conten...