css不固定寬高垂直居中

2021-08-15 20:43:49 字數 641 閱讀 9212

一、

父元素:

display: flex;

justify-content: center;

align-items: center;

二、父元素:

position: relative;

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

position: absolute;

top: 50%;

left: 50%;

三、

display: table;需要有乙個中間層,垂直居中元素為第三層

(1)父元素的父元素:

display: table;

父元素:

display: table-cell;

text-align: center;

vertical-align: middle;

元素:display: inline-block;

(2)父元素的父元素:

display: table;

父元素:

display: table-cell;

vertical-align: middle;

元素:margin: auto;

CSS未知寬高元素水平垂直居中

方法一 思路 顯示設定父元素為 table,子元素為 cell table,這樣就可以使用vertical align center,實現水平居中 優點 父元素 parent 可以動態的改變高度 table元素的特性 缺點 ie8以下不支援 lang en charset utf 8 未知寬高元素水...

水平垂直居中 已知寬高 未知寬高

水平 垂直居中的方法 已知寬高 未知寬高 一 居中元素 已知寬高 1 margin 根據已知的寬高寫死,不推薦 div1 div22 定位 margin top margin left.div1 div23 定位 margin.div1 div24 定位 transform 存在相容問題.div1 ...

寬高未知垂直水平居中

寬高未知情況下垂直水平居中很多情況下都會遇到 查了蠻多大家分享的小例子,我也來記錄一下 這裡是css3的 transform 屬性,可以在ie9及以上的瀏覽器水平垂直居中chrome firefox也是沒有問題 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 total...