CSS居中布局

2021-10-13 07:33:33 字數 2053 閱讀 9683

方式一：css3 transform

.parent


.child
方式二：flex 布局

.parent
適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。

常見的內聯元素有：span, a, img, input, label 等等

.parent
此方法同樣適用於 display: inline-block 的元素。

***居中的元素為常規文件流中的塊元素(display: block)*

**常見的塊元素：div, h1~h6, table, p, ul, li 等等

方式一：設定 margin

.parent


.child
此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。

方式二：修改為 inline-block 屬性

.parent


.child


.child
方式一：

.parent


.child
方式二：

.parent


.child
方式一：css3 transform

.parent


.child
方式二：flex 布局

.parent
適用於子元素為浮動，絕對定位，內聯元素，均可垂直居中。

.text
把文字的 line-height 設為文字父容器的高度，適用於只有一行文字的情況。

方式一：

.parent


.child
方式二：

.parent


.child


div
優點：

不僅可以實現在正中間，還可以在正左方，正右方

元素的寬高支援百分比 % 屬性值和 min-/max- 屬性

可以封裝為乙個公共類，可做彈出層

瀏覽器支援性好

.child
特點：

良好的跨瀏覽器特性,相容 ie6 - ie7

靈活性差，不能自適應，寬高不支援百分比尺寸和 min-/max- 屬性

.child
特點：

內容可自適應，可以封裝為乙個公共類，可做彈出層

可能干擾其他 transform 效果

.parent
這是 css 布局未來的趨勢。flexbox 是 css3 新增屬性，設計初衷是為了解決像垂直居中這樣的常見布局問題。

.parent


.child
適用於子元素 display 為 inline-block, inline 型別的元素，需要已知父元素的寬高，且父元素的寬高不能設為百分比數。

.parent


.child
該方法的要點是給父元素設乙個合適的 font-size 的值，這個值的取值為該父元素的高度除以 1.14 得到的值，並且子元素必須 是乙個 inline 或 inline-block 元素，需要加上 vertical-align: middle 屬性。使用這種方法，子元素的寬度或高度都不必知道。

具體原理可以上網搜 vertical-align 垂直居中。

text

CSS 居中布局

居中在平時的運用很多，以下簡單做了一些總結。統一 html 格式如下 class container class content contentdiv div 居中效果如下 1.1.1 已知父元素子元素高度 container content 1.1.2 未知父元素高度，已知子元素寬度 高度.con...

CSS居中布局

一 水平居中方案 1 行內元素 設定 text align center 2 定寬塊狀元素 設定 左右 margin 值為 auto 3 不定寬塊狀元素 a 在元素外加入 table 標籤 完整的，包括 table tbody tr td 該元素寫在 td 內，然後設定 margin 的值為 aut...

CSS居中及布局

css中的居中可分為水平居中和垂直居中。水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。使用inline block和text aligh實現.parent child 優點 相容性好 缺點 需要同時設定子元素和父元素 使...