原理：首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。
優點：相容性好
缺點：需要知道寬高，不夠靈活
.container優點：不需要知道寬高，靈活
缺點，相容不好，在移動裝置上建議使用
.container.container缺點：相容性不好，在移動裝置上建議使用
.container缺點：增加了無用的 html 結構
width: 100%;
height: 100%;
display: table;
.vertical
span
img
}&.center
}}
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
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使子容器寬度隨著內...