水平垂直居中
阿新 • • 發佈：2017-10-04
一半 水平居中 type span adjust after 絕對定位 web 根據
1.利用絕對定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>水平垂直居中</title> <style> .center{ position:absolute; top:50%; left:50%; width:100px; height:30px; margin-top: -15px; margin-left: -50px; border:1px solid red; text-align:center; background: red; } </style> </head> <body> <div class="center">垂直水平居中</div> </body> </html>
top與left設為50%，margin-left為寬度一半的負值，margin-top為高度一半的負值
此方法最常見，但僅僅適用於已知寬高的情況下。
2.絕對定位結合transform
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>水平垂直居中</title> <style> .center{ position:absolute; top:50%; left:50%; width:100px; height:30px; -webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border:1px solid red; text-align:center; background: red; } </style> </head> <body> <div class="center">垂直水平居中</div> </body> </html>
可在未知寬高時使用，但在IE8及以前的瀏覽器內不支持，且內部文本可能因為移動而稍顯模糊
3.利用flex
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>水平垂直居中</title> <style> .cont-center { height: 500px; -webkit-display: flex; -moz-display: flex; display: flex; justify-content: center; align-items: center; } .center{ width:100px; height:30px; background: red; } </style> </head> <body> <div class="cont-center"> <div class="center">垂直水平居中</div> </div> </body> </html>
IE11以下不支持justify-content、align-items等屬性
4.利用ifc布局，即空的img或者偽元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>水平垂直居中</title> <style> .cont-center { height: 500px; text-align: center; font-size: 0; -webkit-text-size-adjust: none; } .center{ width:100px; height:30px; font-size: 15px; background: red; vertical-align: middle; display: inline-block; } .cont-center:after { content: ‘‘; width: 0; height: 100%; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="cont-center"> <div class="center">垂直水平居中</div> </div> </body> </html>
5.利用calc
根據雅虎的35個前端優化法則，並不提倡使用calc，略過。
水平垂直居中