您的位置：首页技术文章
文章详情页

css3 - css垂直水平居中？

浏览：238日期：2023-08-05 18:11:31

问题描述

如何实现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/

标签： CSS
上一条：css - Flexbox 怎么实现多行多列下一条：网页动画等过渡效果，CSS3 transitions 和 jQuery animations 谁实现的性能更好？
相关文章：
1. 修改mysql配置文件的默认字符集重启后依然不生效2. mongodb - windows7下mongod无法正常启动3. angular.js - 关于指令link 中的创建变量问题4. mysql - 请教一个Java做数据库缓存的问题5. php - 类似Apple官网顶部3级导航该如何设计数据库？6. Java局部变量为什么要初始化7. 作为新手，未定义索引username，求解，谢谢8. python - 如何让dataframe A 的一列与dataframe B的一列相减 相加结果记到A的c列？9. javascript - 豆瓣的这个自适应是怎么做的？10. java - 腾讯云mysql数据库可以插入数据，但是不能查询数据，求解答
排行榜
修改mysql配置文件的默认字符集重启后依然不生效
修改mysql配置文件的默认字符集重启后依然不生效
1. angular.js - 关于指令link 中的创建变量问题
2. mongodb - windows7下mongod无法正常启动
3. mysql - 请教一个Java做数据库缓存的问题
4. php - 类似Apple官网顶部3级导航该如何设计数据库？
5. angular.js - ng-model如何绑定二选一的单选项框？
6. mongodb - weblogic部署失败，一直不断出现如下报错
7. javascript - 打算写一个c++的node图像处理模块,有没有推荐的c++图片处理库？
8. angular.js - Angularjs中点击事件传递参数 给class更换样式。
9. Java局部变量为什么要初始化
10. java - 腾讯云mysql数据库可以插入数据，但是不能查询数据，求解答
热门标签