css居中總結

2021-08-07 20:18:41 字數 1792 閱讀 2751

1.我們可以通過給該元素的父級設定margin: 0 auto的方式來實現。

html:

class="parent">

class="child">

center

div>

div>

css:

.child
此時檢查元素即可即可實現內層的div實現了居中,這種方式是最為我們熟知的，其缺點是需要設定子元素的寬度。

2.通過position定位

html:



centerli>


ul>


div>
css:

div 


ul
1.給子元素設定display: inline-black,父元素設定text-align: center。

html:



center
css:

div 


p
2.當元素被設定float的時候,它的寬度就會被其內容撐開，然後通過positon定位來實現橫向居中。

html:



centerli>


ul>


div>
css:

div 


ul li
3.flex布局， justify-content:center;主軸居中。align-items:center;交叉軸居中；當設定了flex-direction屬性時，主軸的方向會改變。

4.css width: fit-content屬性。

5.用css3的transform

html:



class="test">


center


p>


div>
css:

div 


.test
總結一下起來也就是兩種方式，其中有比較直接的方式比如，margin: 0 auto，雖然這種方式的相容性很好，沒有***，但是這種方式最主要的缺陷是只適用於子元素寬度固定的情況。或者用css3的固有屬性flex布局或者 width: fix-content這種方式實現起來簡單直接，但在處理一些舊版本的瀏覽器時，存在很嚴重的相容性問題。還有就是間接的實現方式通過position定位，具體思想主要是子元素先移動到父元素二分之一的位置，relative，或者absoulte都可以實現，然後在將子元素向左移動自身二分之一的位置，這種方式有廣泛的適用性，但是思路可能比較複雜。

1.用css3的transform屬性，以及postion定位，與上面的水平居中類似，只是改為top:50%,translatey(-50%)即可。

2.設定父元素display: table;子元素dispaly: table-cell,vertical-align: middle;

3.絕對定位

html:

class="parent">

class="child">

nnnnnnn

div>

div>

css:

.parent 


.child
4.單行文字時可以設定height與line－height相同實現文字居中。

5.外邊距margin取負數，大小為width/height的一半，再加上top: 50%; left: 50%;

css 居中總結

1.定寬塊狀元素 水平居中 divstyle 2.不定寬塊狀元素 水平居中 wrap class wrap 設定我所在的div容器水平居中 div 2.display inline textalign center 它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些...

css居中總結

給父元素設定 text align center 但對浮動元素，絕對定位元素無效設定margin 0 auto 將塊級元素display設定為inline，然後使用text align center 給父元素設定float,position relative,left 50 子元素設定positio...

CSS居中總結

在父元素上設定 單個元素 這裡利用了table標籤的寬度自適應性，即寬度由文字長度決定。原元素經過轉換後變成了寬度固定的元素。2.將該元素的display屬性設定為inline，同時在其父元素上設定text align屬性為center。parent child 這也很好理解，將元素轉換為行內元素，...