常用居中方法記錄

2022-03-30 19:50:16 字數 686 閱讀 3245

1.相對定位

(1)在父元素中使用text-align:center;

(2)使用margin:auto;

(3)通過設定left,top偏移量和負邊距實現居中

width:[width]; height:[height];

position:absolute;

left:50% top:50px;

margin-left:-[width];

margin-top:-[height];

(4)通過偏移和css位移實現(css3版)

position: absolute; left: 50%; top: 50%;

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

(5)絕對定位通過設定四個偏移量和外邊距自動實現居中(水平+垂直)

width:[width]; height:[height];

position: absolute;

left: 0; top: 0; right: 0; bottom: 0;

margin: auto;

(6)不定寬居中

/*清浮動*/

.preant::after

/*不定寬居中*/

.preant

.child

居中方法總結

居中分為水平居中和垂直居中 1 水平居中 1 行內元素居中 行內元素居中是只針對行內元素的,比如文字 text img 按鈕等行內元素,可通過給父元素設定 text align center 來實現。另外,如果塊狀元素屬性display 被設定為inline時,也是可以使用這種方法。但有個首要條件是...

盒子居中方法

css實現盒子模型水平居中 垂直居中 水平垂直居中的多種方法 水平居中效果圖 水平居中 全域性樣式 parent child 第一種 margin width 這種方法適用於已經知道width的盒子,實現起來比較簡單 child 第二種 text align inline block 這種方法適用於...

元素居中方法

一 水平居中方式 行內元素 text alien center 塊元素 已知寬度 1 margin 0 auto 2 position margin組合 left 50 margin left px 未知寬度 1 display inline inline block text alien cent...