一、水平居中
1、行內元素水平居中
父級元素設定text-align: center ——>實現在塊級元素內部的行內元素（inline/inline-block/inline-flex/inline-table）水平居中
dome
//由此可見，塊級裡面的塊級元素水平居中也可以先把裡面的塊級設定成行內塊元素
（1）、設定左右外邊距為auto，margin：0 auto;
.child.childdome
//先將父級元素設定為相對定位，再將子元素設定為絕對定位，向右移動子元素，移動距離為父級元素的一半，最後通過向左移動子元素的一半寬度以達到水平居中
.parent
.child
（1）、利用flex布局
item1
item2
item3
item4
#container
.item
對於定寬的浮動元素，通過子元素設定relative + 負margin
對於不定寬的浮動元素，父子容器都用相對定位
通用方法(不管是定寬還是不定寬)：flex布局
①定寬的浮動元素
通過子元素設定relative + 負margin,原理見下圖：
注意：樣式設定在浮動元素本身
.child
我是要居中的浮動元素
②不定寬的浮動元素
通過父子容器都相對定位，偏移位移見下圖：
注意：要清除浮動，給外部元素加上float。這裡的父元素就是外部元素
我是浮動的
我也是居中的
.box
p
③通用辦法flex布局(不管是定寬還是不定寬)
利用彈性布局(flex)的justify-content屬性，實現水平居中。
.parent
.chlid
我是要居中的浮動元素
讓絕對定位的元素水平居中對齊。
.parent
.child
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...