關於居中對齊的方式總結

2021-10-08 22:34:50 字數 408 閱讀 6386

對於行內元素可以使用text-align:center

對於塊級元素使用margin:auto

使用絕對定位,left:50%+margin-left:-(子元素寬度的一半)

使用絕對定位+transform屬性:left:50%+transform:translatex(-50%)

使用絕對定位+margin:auto:left:0+right:0+margin:auto

line-height=height

使用絕對定位,top:50%+margin-top:-(子元素寬度的一半)

使用絕對定位+transform屬性:top:50%+transform:translatey(-50%)

使用絕對定位+margin:auto:top:0+bottom:0+margin:auto

常見的div居中對齊方式

前段時間面試的時候面試題裡面對css考察最多的就是div居中對齊的問題,因此特地對div居中對齊的方式做了乙個簡單的總結,本文的目標就是希望各位在以後根據不同的情況使用不同的居中方式,閒話少說,直接上 display flex width 500px height 500px webkit box ...

實現垂直居中對齊的幾種方式

這裡主要是記錄下自己之前的筆記,如有錯誤還請指出!行內元素垂直居中 塊級元素 天邊的最後一抹斜陽,黯淡了,無盡的黑暗將要襲來。我陷入了沉思中去。日子一天一天地逝去,從滿心不甘至無可奈何,最終落得個與世訣別。即使再不願,也抵不過光陰的蹉跎,歲月的無情。似一支鋒利的針,刺的多了,也便感覺不到疼了。只眼睜...

css水平垂直居中對齊方式

css屬性 水平居中 text aligin center 垂直居中 line height height 例子 html div class mb10 line align 我是垂直水平居中對齊的文字哦!div div class mb10 line align span 我是垂直水平居中對齊的內...