css 實現水平居中

2021-10-07 13:59:40 字數 702 閱讀 5284

水平居中分為塊狀元素和行內元素，而塊狀元素又分為定寬塊狀元素和不定寬塊狀元素。
行內元素水平居中
2、定寬塊狀元素(dispaly: block)水平居中（塊狀元素的width是乙個固定值），滿足塊狀和定寬兩個條件時，即可通過給自己設定「左右margin為auto」來實現。

定寬塊狀元素水平居中
3、不定寬塊狀元素水平居中

1) 改變塊狀元素的 dispaly 屬性為 inline， 然後給父級設定 text-aline：center 來實現水平居中， 這種方法的缺點是不能再給元素設定寬高了

不定寬塊狀元素水平居中
2) 利用絕對定位，讓元素向右偏移50%，然後再向左偏移自身的50%

不定寬塊狀元素水平居中
3) 利用flex實現水平居中（一）

不定寬塊狀元素水平居中
4) 利用flex實現水平居中（二）css3的fit-content配合左右margin為auto實現水平居中方法

不定寬塊狀元素水平居中
5)display:flex;just-content:center;

css實現水平居中

一 對於行內元素 text align center 二 對於確定寬度的塊級元素 1 margin和width實現水平居中 常用 前提 已設定width值 margin left auto margin right auto 2 絕對定位和margin left 寬度值 2 實現水平居中 固定寬度塊...

CSS實現垂直居中水平居中

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

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

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