css垂直水平居中 三欄布局合集

loat + margin（浮動布局）

left

right
main
body,html,.containerl
/*左邊欄左浮動*/
.left
/*中間欄自適應*/
.main
/*右邊欄右浮動*/
.right

優點：快捷 簡單 相容性較好

缺點: 有侷限性 脫離文件流 需要清除浮動等

left

main
right
body,html,.container
/*左右進行絕對定位*/
.left,.right
.left
.right
/*中間用margin空出左右元素所佔的空間*/
.main
/*或者中間也進行絕對定位*/
.main

優點：簡單粗暴

缺點: 脫離文件流 高度未知會出現問題 可用性差

left

main
right
body,html
.container
.left
.main
.right

優點：比較完美 移動端首選

缺點: 不相容 ie9 及以下

left

main
right
body,html
.container
.container>div
.left
.main
.right

優點：相容性很好（ie8 及以上） 父元素高度會被子元素撐開（不擔心高度塌陷）

缺點: seo 不友好 當其中乙個單元格高度超出的時候，其他的單元格也是會跟著一起變高的

left

main
right
body,html
.container
.left
.main
.right

優點：簡單強大 解決二維布局問題

缺點: 不相容 ie9 及以下

123123

注意：後面不在重複這段公共**，只會給出相應提示
/* 公共** *//* 公共** */

/* 此處引用上面的公共** */

/* 此處引用上面的公共** */
/* 定位** */
.wp 
.box

相容性也很好，缺點是需要知道子元素的寬高

/* 此處引用上面的公共** */

/* 此處引用上面的公共** */
/* 定位** */
.wp 
.box

這種方法相容性也很好，缺點是需要知道子元素的寬高

/* 此處引用上面的公共** */

/* 此處引用上面的公共** */
/* 定位** */
.wp 
.box

/* 此處引用上面的公共** */

/* 此處引用上面的公共** */
/* 定位** */
.wp 
.box

/* 此處引用上面的公共** */

/* 此處引用上面的公共** */
/* 定位** */
.wp 
.box

7.css-table

.wp 

.box

.wp

移動端已經完全可以使用flex了，pc的話相容到ie9

.wp 

.box

**量也很少，但相容性不如flex，不推薦使用

居中元素不定寬高

absolute + 負margin

absolute + transform

absolute + margin auto

lineheight

absolute + calc

table

css-table

flex

grid

此處可借鑑vertical-center ，在前端的路上大佬很多，有些坑他們已經幫我們走好了@顏海鏡大佬

其他問題的話就是transfrom animation 線性漸變這些問題了吧

咱們一期一期的寫吧，重點還是要消化，今天css先到這吧，下棋的話說重頭戲js部分，自己對這塊也不是太熟悉，一塊學習吧！加油！

CSS布局 水平垂直居中

題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...

CSS 布局 水平垂直居中

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

CSS水平垂直居中布局

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