css3 - css垂直水平居中?
問題描述
如何實(shí)現(xiàn)B在A中,垂直和水平方向都居中?代碼如下:
<!DOCTYPE html><html lang='zh'><head> <meta http-equiv='X-UA-Compatible' content='IE=Edge'> <meta charset='UTF-8'/> <title></title> <style>#A { position: relative; width: 500px; height: 500px; background-color: green;}#B { position: absolute; max-width: 300px; max-height: 300px; background-color: blue;} </style></head><body><p id='A'> <p id='B'>哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥給哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥給哥哥哥哥哥哥哥給哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥給哥哥哥哥哥哥哥給哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥給哥哥哥哥哥哥哥給哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥給哥哥哥 </p></p></body></html>
問題解答
回答1:兩種方法:
第一種:
#A { position: relative; width: 500px; height: 500px; background-color: green;}#B { position: absolute; max-width: 300px; max-height: 300px; background-color: blue; /* add */ margin:auto; left:0; right:0; top:0; bottom:0;}
第二種:
#A { position: relative; width: 500px; height: 500px; background-color: green;}#B { position: absolute; max-width: 300px; max-height: 300px; background-color: blue; /* add */ top:50%; left:50%; transform:translate(-50%,-50%);}回答2:
#A {display:table-cell;vertical-align:middle; } #B {/* position:absolute; */margin:0 auto; }
http://jsfiddle.net/7uakz7p1/
回答3:今天剛學(xué)到的一種比較簡單的方法:父容器設(shè)置display: flex; 要居中的子元素設(shè)置margin: auto;即可。本例中
#A {position: relative;width: 500px;height: 500px;background-color: green;/*add*/display: flex;display: -webkit-flex; }#B {/*position: absolute;*/max-width: 300px;max-height: 300px;background-color: blue;/*add*/margin: auto; }
ps. IE下好像有問題...
回答4:#A { position: relative; width: 500px; height: 500px; background-color: green;}#B { width: 50%; height: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 300px; max-height: 300px; background-color: blue;} 回答5:
正好發(fā)現(xiàn)一個(gè)網(wǎng)站,給了好多解決方案 Centering in CSS: A Complete Guide
回答6:http://jsfiddle.net/nbayw7ea/
回答7:http://css-tricks.com/centering-css-complete-guide/
相關(guān)文章:
1. windows誤人子弟啊2. php傳對應(yīng)的id值為什么傳不了啊有木有大神會的看我下方截圖3. 如何用筆記本上的apache做微信開發(fā)的服務(wù)器4. python - linux 下用wsgifunc 運(yùn)行web.py該如何修改代碼5. 關(guān)于mysql聯(lián)合查詢一對多的顯示結(jié)果問題6. 實(shí)現(xiàn)bing搜索工具urlAPI提交7. 冒昧問一下,我這php代碼哪里出錯(cuò)了???8. mysql優(yōu)化 - MySQL如何為配置表建立索引?9. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)10. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個(gè)坑!求助下面的存儲過程哪里錯(cuò)啦,實(shí)在是找不到哪里的問題了。
