最近公司的專案裡面有個要調樣式的頁面 , 可能是很長很長時間沒有寫過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...