css3 - css垂直水平居中？
问题描述
如何实现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：今天刚学到的一种比较简单的方法：父容器设置display: flex; 要居中的子元素设置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：
正好发现一个网站，给了好多解决方案 Centering in CSS: A Complete Guide
回答6：http://jsfiddle.net/nbayw7ea/
回答7：http://css-tricks.com/centering-css-complete-guide/
相关文章：
1. 如何解决docker宿主机无法访问容器中的服务？2. java - xml 传输数据如何处理更好3. javascript - h5上的手机号默认没有识别4. 求大神帮我看看是哪里写错了 感谢细心解答5. mysql - 要取出数据库中按某字段排序后的前10，20，30条数据要怎么做？6. python - 类 对象 函数后面的参数问题，勉强看懂但是要自己写出来就感觉很困难7. javascript - 用原生的js获取body和用jquery获取body的的margin值为什么不一样？8. javascript - 想让图片上那个块，在增加块的宽度的时候向右边移动，而不是向左边移动。需要怎么解决？9. Python Selenium WebDriver如何刷新当前页面10. pycharm运行python3.6突然出现R6034问题，请问如何处理？
网公网安备