CSS布局 水平垂直居中

2021-08-14 17:42:27 字數 995 閱讀 5369

題外話：這是乙個讓人抓狂的問題。

html文件結構如下：
實現效果：

1.（子元素已知寬高）給父容器設定相對定位（relative），子元素設定為絕對定位（absolute），top、left設定為50%，margin-top、margin-left分別設定為高寬的一半的負數。

.outer


.inner
2.（子元素未知寬高）使用css3新特性transform。設定父元素相對定位（relative），子元素絕對定位（absolute），top、left為50%，x軸、y軸偏移-50%。

.outer


.inner
3.（

子元素未知寬高）父元素相對定位（relative），子元素絕對定位（absolute），top/right/bottom/left均為0，margin為auto。

.outer


.inner
4.（父元素已知寬高）父元素設定display為flex，專案在主軸上居中（justify-content），專案在交叉軸上居中（veritcal-items）。

.outer


.inner
附：

display屬性值flex說明

5.css3新特性，calc()屬性（注：目前瀏覽器對此屬性的支援度不高，最好在寫css的時候，相容其它瀏覽器）

.outer


.inner

CSS 布局 水平垂直居中

原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...

CSS水平垂直居中布局

在日常開發中，經常會遇到要求水平垂直居中效果 實現水平垂直居中也是面試高頻考點 水平垂直居中又分兩種情況 1.內容定寬高 2.內容不定寬高 內容定寬高1.絕對定位和負margin值 doctype html en utf 8 水平垂直居中效果 title box content style head...

CSS居中布局（水平居中和垂直居中）

一 水平居中的四種方法 父容器和子容器寬度均不固定 1 inline block text align 子容器 父容器 缺點 不相容ie6 7，子容器內部的內容也會居中 相容辦法 子容器 模擬inline block 2 table margin 子容器 display table使子容器寬度隨著內...