20181127——CSS保持浮層水平居中
阿新 • • 發佈：2018-11-28
元素水平居中
正常的margin後面是跟padding一樣的，跟著4個引數，margin: 0 auto；0為上下外間距為0px auto代表左右自動適應。
居中不好使的原因：
1、元素沒有設定寬度，沒有寬度怎麼居中嘛！
2、設定了寬度依然不好使，你設定的是行內元素吧，行內元素和塊元素的區別以及如何將行內元素轉換為塊元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:200px; height: 200px; background-color: orange; margin:0 auto } #context{ line-height: 80px; background-color: red; width: 80px; height:80px; text-align: center; margin: 0 auto; } </style> </head> <body> <div id="box"> <div id="context">嗚嗚嗚</div> </div> </body> </html>
元素水平垂直居中
方案1：position 元素已知寬度
父元素設定為：position: relative;
子元素設定為：position: absolute;
距上50%，據左50%，然後減去元素自身寬度的距離就可以實現
方案2：position transform 元素未知寬度
如果元素未知寬度，只需將上面例子中的margin: -50px 0 0 -50px;替換為：transform: translate(-50%,-50%);
方案3：flex佈局
.box { background-color: #FF8C00; width: 300px; height: 300px; display: flex;//flex佈局 justify-content: center;//使子專案水平居中 align-items: center;//使子專案垂直居中 }