css水平垂直居中 三種最常用的方式

2022-09-07 22:18:19 字數 856 閱讀 5840

**在下面,可以直接用。

bb兩句,個人見解:

text-align 是讓裡面的內容水平居中

line-height 是行高,行高等於元素的高度 就能讓內容垂直居中

left和top 50% 是根據html 來定位的, 只能讓元素的左上頂點,也就是這個

要達到想到的位置,就要減去自身寬高的一半。 margin-left:-100px margin-top : -100px。

最好用的就是第2個.demo裡的方法了

通過絕對定位 上下左右都為0的話就是讓盒子和可視區一樣大

auto = 可視區的寬高 減去 盒子的寬高    簡單的說就是均分剩餘空間

margin : auto 就是 減去上下左右盒子的寬高再平分 達到水平垂直居中

再給盒子乙個固定寬高。就能完成水平垂直居中

寬度為auto的絕對定位元素 可以通過left與right 調整它的寬度

高度為auto的絕對定位元素 可以通過top與bottom 調整它的寬度

css水平垂直居中三種實現方法

方法一 使用dispaly inline block 和 vertical align 還有偽類實現 block1 block1 before center1 方法二 使用相對定位或者固定定位和transform來實現。ie8及以下不支援 block2 center2 方法三 使用display t...

css水平垂直居中三種實現方法

方法一 使用dispaly inline block 和 vertical align 還有偽類實現 block1 block1 before center1 方法二 使用相對定位或者固定定位和transform來實現。ie8及以下不支援 block2 center2 方法三 使用display t...

css垂直水平居中 三欄布局合集

loat margin 浮動布局 left right main body,html,containerl 左邊欄左浮動 left 中間欄自適應 main 右邊欄右浮動 right優點 快捷 簡單 相容性較好 缺點 有侷限性 脫離文件流 需要清除浮動等 2.position 絕對布局 left ma...