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

2021-10-05 18:06:06 字數 1379 閱讀 4605

1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可：

.parent
2.塊狀元素解決方案

.item
3.多個塊狀元素解決方案將元素的display屬性設定為inline-block，並且把父元素的text-align屬性設定為center即可:

.parent
4.多個塊狀元素解決方案 (使用flexbox布局實現)使用flexbox布局，只需要把待處理的塊狀元素的父元素新增屬性display:flex及justify-content:center即可:

.parent
在子元素寬度總和在父元素寬度內，居中正常。如果子元素寬度總和大於父元素寬度，這個方法會將子元素全部強制進父元素的寬度，在設定了寬高150px的情況下：

1.單行的行內元素解決方案

.parent 


/* 以下**中，將a元素的height和line-height設定的和父元素一樣高度即可實現垂直居中 */


a
2.多行的行內元素解決方案組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果，如下：

.parent
3.已知高度的塊狀元素解決方案

.parent


.item
1.已知高度和寬度的元素解決方案1設定父元素屬性  position:relative;，如下**段：

.parent


.item
2.已知高度和寬度的元素解決方案2設定父元素屬性  position:relative;

.item
3.未知高度和寬度元素解決方案設定父元素屬性  position:relative;

.item
4.使用flex布局實現

.parent

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 絕對定位居中 子元素需設定寬高 內容塊的父容器 position relative 子元素 必須設定高度 position absolute top 0 left 0 bottom 0 right 0 margin auto 2 絕對定位配合margin 子元素需設定寬高 第一種 第二種 3 t...