如何實現水平垂直居中

2021-08-18 20:45:53 字數 1387 閱讀 9448

固定寬高的元素，設定垂直居中

法一：用position：absolute和transform：translate來設定（css3的方法）

div
法二：設定display：absolute和margin-left：margin-top設定（css2的方法）

div
法三：設定四邊都為0，margin：auto；（css2的方法）這個方法一定要固定兒子的寬高

div
法四：設定父級為display：flex；子元素margin：auto；父容器需要定長定寬（css3的方法）

body


div
法五：彈性布局，在父級中設定彈性項垂直水平居中，父級需要定長定寬

body


div
不固定寬高設定水平垂直居中

法一：

div
法二： 

.box


.son
多行文字垂直居中

法一：設定display:table-cell;vertical-align:middle;（css2的方法）

.div
法二：設定父級display：flex；align-item：center；justify-content：center；（css3的方法）

.father
單行文字水平垂直居中，

法一：設定text-align:center;line-height和容器的高度一樣（css2的方法）

.father
法二：設定display：flex；align-item：center；justify-content：center；（css3的方法）

.father
兩邊固定，中間自適應布局

法一：兩邊設定左右浮動，中間margin-left，margin-right

.left


.right


.center
法二：兩邊設定絕對定位，脫離文件流，中間通過控制margin來定位



我是左邊


我是右邊


我是中間
法三：用彈性布局，設定兩邊不可縮放，中間可縮放

*


.warp


.left,.right


.center 


我是左邊


我是中間


我是右邊

如何實現水平 垂直居中

不確定當前div的寬度和高度，採用 transform translate 50 50 當前div的父級新增相對定位 position relative div 確定了當前div的寬度，margin值為當前div寬度一半的負值 div 絕對定位下top left right bottom 都設定0 ...

css實現水平居中 垂直居中 垂直水平居中布局

1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...

實現水平居中垂直居中

熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...