css布局居中總匯小筆記

2021-08-07 04:06:19 字數 1883 閱讀 9847

居中是我們在css布局中經常遇到的,今天我把我的css居中做了個小彙總~當做我的小筆記....

所講方法除了特別說明外,都相容ie6+、谷歌、火狐等主流瀏覽器的

開始,先把基本的屬性羅列一下,再記錄一些技巧性的居中~~

只能對,按鈕,文字等行內元素或將行內元素或已經給元素設定了display

為inline或inline-block等進行水平居中,但在ie6、7這兩個奇葩的瀏覽器中,它能對任何元素進行水平居中

就是把要居中的元素的margin-left和margin-right都設為auto,只能實現水平上的居中,不能實現垂直方向的居中,而且,對絕對定位和浮動的元素無效

讓單行的文字垂直居中,配合父容器的高度使用

父容器的高度和line-height高度一致,可以設定單行文字居中,若多行文字居中,要算好多行文字的line-height與父容器的高度了

4使用**

**預設的就會對它裡面的內容進行垂直居中使用屬性 align="center"實現水平居中,垂直居中valign=

」middle」屬性

5 display:table-cell

對於那些不是**的元素,我們可以通過display:table-cell 來把它模擬成乙個**單元格,

介紹完基本的屬性,下面說些技巧性的居中方式:

1 運用定位小技巧居中:

前提:元素要有寬高

絕對定位進行居中的原理是通過把這個絕對定位元素的left或top的屬性設為50%,這個時候元素並不是居中的,而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離,所以需要使用乙個負的margin-left或margin-top的值來把它拉回到居中的位置,這個負的margin值就取元素寬度或高度的一半。

2 運用定位實現居中第二招

只適用於那些我們已經知道它們的寬度或高度的元素,而且它只支援ie9+,谷歌,火狐等符合w3c標準的現代瀏覽器

3 使用平移和定位實現居中

此方法可以不知道元素的寬高 推薦使用

用絕對定位再配合上transform:translate(-50%,-50%) 然後再加上margin-left 和margin-top :50%  拉回translate平移出去的

有更多的居中後續繼續補進筆記中........

CSS 居中布局

居中在平時的運用很多,以下簡單做了一些總結。統一 html 格式如下 class container class content contentdiv div 居中效果如下 1.1.1 已知父元素子元素高度 container content 1.1.2 未知父元素高度,已知子元素寬度 高度.con...

CSS居中布局

方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動,絕對定位,內聯元素,均可水平居中。常見的內聯元素有 span,a,img,input,label 等等 parent 此方法同樣適用於 display inline block ...

CSS居中布局

一 水平居中方案 1 行內元素 設定 text align center 2 定寬塊狀元素 設定 左右 margin 值為 auto 3 不定寬塊狀元素 a 在元素外加入 table 標籤 完整的,包括 table tbody tr td 該元素寫在 td 內,然後設定 margin 的值為 aut...