1.絕對定位 absolute 負margin
思路:使用絕對定位,負邊距,需要知道子元素的寬高,且把子元素設定為position:absolute,再設定left和top為50%,再加上負邊距,margin-left和margin-top相對於寬高各一半
.box
<
/style>
易於理解,相容性好
2.缺點
需要知道子元素的寬高
2.絕對定位 absolute margin:auto
思路:使用絕對定位方式,left:0;right:0;top:0;botton:0;margin:auto
.box易於理解,相容性好
2.缺點
需要知道子元素的寬高
3.絕對定位 absolute calc
思路:與第一種方式其實也差不多,不過這裡使用的是calc計算函式
.box易於理解,相容性依賴calc
2.缺點
需要知道子元素的寬高
4.絕對定位 absolute transform
思路:利用css3的transform方法,與第一種方法也類似,但是ie8以下不支援
.box易於理解,相容性依賴transform
不需要知道子元素的寬高
2.缺點
如果同時使用transform的其他屬性,會產生一些影響
5.flex布局
思路:彈性盒布局,只需要將父元素設定三個屬性即可:display:flex;justify-content:center;align-item:center
.box .in
簡單,快捷
2.缺點
低版本瀏覽器不支援(ie9以下不支援),不過目前很少用低版本了
6.table**
思路:利用css新增的table屬性,把普通元素變為table元素
.box .in
思路:grid布局跟flex也差不多的
1.父元素指定子元素對齊方式:
.box .in
.box.in
思路:利用空標籤span設定它的vertical-align基準線為中間,並且設定為inline-block,寬度為0
這種方式不好的地方就是多了乙個沒有用的空標籤
.box
.base-line.in
="box"
>
="in"
>
<
/div>
="base-line"
>
<
/span>
<
/div>
推薦使用第1,2,3,4,5這幾種方式,然後絕對定位方式適合大範圍的,比如彈框居中.如果是區域性的話,建議使用彈性盒
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...