css常用的居中方式

2021-10-03 15:42:43 字數 1692 閱讀 1316

常用的居中方式：

這種居中方式可以水平居中塊級元素中的行內元素inline，inline-block；

"text-align:center"


>


"display:inline-block;width:100px"


>居中
但是這個方法居中塊級元素中的塊級元素時，如果div中的div設定了自己的寬度，那麼只能居中，子元素的文字，通俗的說text-align:center單獨使用時只能居中文字；

"text-align:center;position:relative"


>


"position:absolute"


>塊級元素
還有一種脫離文件流的情況，父元素設定屬性position:relative/absolute/fixed，子元素設定position:absolute

這時候子元素左端會居中；

在不脫離文件流的情況使用這種方式可以左右居中，如果設定了脫離文件流屬性則會失效

"">


塊級元素
下面重點來了常用的

3.脫離文件流的居中方式（上下左右居中）：

這種方式常被用在設定彈出框

"div1"


>


"div2"


>塊級元素


.div1


div2
寫到top: 50%;left: 50%;的時候，這時候內部div是按左邊居中的，這時候設定margin-left為負的寬度的一般，margin-top為負的高度的一般就居中了；

div2裡面還可把top: 50%;left: 50%替換成margin：(高度的一半)，auto

display:table-cell配合width，text-align:center,vertical-align:middle讓大小不固定元素垂直居中,這個方式將要對其的元素設定成為乙個td，float、absolute等屬性都會影響它的實現，不響應margin屬性;

="div1"


>


="div2"


>塊級元素<


/div>


.div1


.div2


<


/style>
"height：40px;line-heigth:40px;"


>


我是要居中的內容
這種方式將脫離文件流的元素，設定top：50%，left：50%，然後使用transform來向左向上便宜半個內元素的寬和高。

"div1"


>


"div2"


>塊級元素


.div1


}.div2
7.flex布局方式居中

"div1"


>


"div2"


>塊級元素


div1


div2

CSS常用居中方式

用絕對定位，使它的top left right bottom都為0就可以實現居中，水平居中和垂直居中均可實現 box 利用負的margin來進行居中，需要知道固定寬高，限制比較大。box box chl box ie9 以下不支援 box 將父元素轉換成 單元格顯示，然後使用垂直居中實現 box c...

css常用的幾種居中方式

css常用的幾種居中方式,可以直接拿來用 1,position absolute定位 box 複製 2,position fixed box 複製 3,position fixed,margin auto box 複製 4,position absolute,margin auto box 複製 5...

css居中方式

水平居中的text align center 和 margin 0 auto 前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。垂直居中的line height 作用在父元素上，當他的值等於父元素的height值時，內部的文字就會自動的垂直居中 萬能p...