簡介

總結記錄一下經常需要用到垂直居中布局，歡迎補充(空手套。。。O(∩_∩)O)

以下栗子如果未特別標注同一使用這樣的html結構

垂直居中布局

利用絕對定位和負margin

絕對定位可以很容易做到top:50%，現在只要再讓目標元素上移自身高度的一半就垂直居中了

.container {

background: #777777;

height: 400px;

position: relative;

}

.container .content {

width: 100px;

height: 100px;

position: absolute;

top: 50%;

margin-top: -50px;

left: 50%;

margin-left: -50px;

background: #ee5f28;

}

優(yōu)點：兼容性好

缺點：需要知道居中元素的高度

利用絕對定位和transform

.container {

background: #777777;

height: 400px;

position: relative;

}

.container .content {

width: 100px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

background: #ee5f28;

}

優(yōu)點：不需要考慮content元素的高度

缺點：兼容性

利用絕對定位和calc

.container {

background: #777777;

height: 400px;

position: relative;

}

.container .content {

width: 100px;

height: 100px;

position: absolute;

top: calc(50% - 50px);

left: calc(50% - 50px);

background: #ee5f28;

}

優(yōu)點：相比于前面少了兩條樣式

缺點：兼容性

利用flex

.container {

background: #777777;

height: 400px;

display: flex;

justify-content: center;

align-items: center;

}

.container .content {

width: 100px;

height: 100px;

background: #ee5f28;

}

.container {

background: #777777;

height: 400px;

display: flex;

}

.container .content {

width: 100px;

height: 100px;

background: #ee5f28;

margin: auto;

}

優(yōu)點：垂直居中特別容易搞定

缺點：兼容性

震驚absoulute(絕對定位)還可以這樣用

.container {

background: #777777;

height: 400px;

position: relative;

}

.container .content {

width: 100px;

height: 100px;

background: #ee5f28;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

優(yōu)點：

1.跨瀏覽器，兼容性好(無需hack，可兼顧IE8~IE10)；

2.無特殊標記，樣式更精簡；

3.自適應布局，可以使用百分比和最大最小高寬等樣式；

4.居中時不考慮元素的padding值(也不需要使用box-sizing樣式)；

5.布局塊可以自由調節(jié)大小；6.img的圖像也可以使用

6.瀏覽器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”經測試可以完美地應用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以運行在IE8~IE10上

使用inline-block

.container {

background: #777777;

height: 400px;

text-align: center;

font-size: 0;

overflow: auto;

}

.container::after {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

}

.container .content {

display: inline-block;

vertical-align: middle;

width: 100px;

height: 100px;

background: #ee5f28;

}

這里注意：容器‘container’里要設置font-size:0;避免inline-block之間產生間隔

優(yōu)點：

內容高度可變

內容溢出則能自動撐開父元素高度

瀏覽器兼容性好，甚至可以調整支持IE7

使用table與table-cell

Document

.container-table {

background: #777777;

height: 400px;

width: 100%;

display: table;

}

.container-table .container-cell {

display: table-cell;

vertical-align: middle;/* 這里達到了垂直居中的效果 */

}

.container-table .container-cell .content {

width: 100px;

height: 100px;

margin: 0 auto;/* 利用margin值 水平居中*/

background: #ee5f28;

}

優(yōu)點：

內容高度可變

內容溢出則能自動撐開父元素高度

瀏覽器兼容性好

缺點：額外標簽

參考資料

總結

以上是生活随笔為你收集整理的html让布局垂直居中,css垂直居中布局总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。