html让布局垂直居中,css垂直居中布局总结
簡介
總結記錄一下經常需要用到垂直居中布局，歡迎補充(空手套。。。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;
}
優點：兼容性好
缺點：需要知道居中元素的高度
利用絕對定位和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;
}
優點：不需要考慮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;
}
優點：相比于前面少了兩條樣式
缺點：兼容性
利用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;
}
優點：垂直居中特別容易搞定
缺點：兼容性
震驚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;
}
優點：
1.跨瀏覽器，兼容性好(無需hack，可兼顧IE8~IE10)；
2.無特殊標記，樣式更精簡；
3.自適應布局，可以使用百分比和最大最小高寬等樣式；
4.居中時不考慮元素的padding值(也不需要使用box-sizing樣式)；
5.布局塊可以自由調節大小；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之間產生間隔
優點：
內容高度可變
內容溢出則能自動撐開父元素高度
瀏覽器兼容性好，甚至可以調整支持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;
}
優點：
內容高度可變
內容溢出則能自動撐開父元素高度
瀏覽器兼容性好
缺點：額外標簽
參考資料
總結
以上是生活随笔為你收集整理的html让布局垂直居中,css垂直居中布局总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html导航栏代码跳转,微信小程序自定义
- 下一篇： 计算机软件水平考试英语试题,计算机软考软