CSS水平 垂直居中

2021-10-03 00:19:16 字數 1173 閱讀 2740

1.text-align:center塊狀元素,水平居中

2.margin:0 auto水平居中 以外邊框為參照物,上下外邊框距為0,左右外邊框距瀏覽器會自動計算平分

3.line-height 垂直居中通過設定行間距。line-height只適用於單行文字的元素,多行元素不適用。

4.float屬性+relative定位給父元素設定float:left ,然後父元素整體向左移動50%(position:relative;left:50%),這時父元素要清除浮動(clear:both),然後再給子元素整體向左移動50%(position:relative;left:-50%)

5.根據絕對定位absolute+margin實現水平居中給父元素乙個相對定位relative,利用絕對定位absolute,配合margin:auto自動計算外邊距(position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;)。相對於相對應於relative的絕對定位absolute,需要定寬。relative只是為了給子元素定位用的

***6.使用absolute絕對定位+translate 移動轉***換,實現水平垂直居中 使用百分比來絕對定位乙個元素,並配合使用translate,將元素移動定位居中(position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%))。

7.利用table布局,預設垂直居中(vertical-align:middle) 如果不是table布局的話可以:仿table(display:table-cell),一樣使用vertical-align:middle實現居中對齊

8.flex布局父元素使用display:flex,設定其屬性justify-content.align-items都為center(display: flex; justify-content: center; align-items: center),實現水平居中

9.flex布局+margin父元素使用flex布局(display:flex),子元素使用margin:auto

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中,是將要水平排列的塊狀元素設為display inline block,然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中,意思是上下距離為0,auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...

css實現水平居中 垂直居中 垂直水平居中布局

1.只需要把行內元素包裹在乙個屬性display為block的父層元素中,並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block,並且把父元素的text align屬性設定為center即可 paren...