经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
3种水平垂直的方式
来源:cnblogs  作者:0x29a  时间:2019/7/23 8:45:31  对本文有异议

CSS水平垂直居中

1 绝对定位 + 转换

  1. <div class="parent">
  2. <div class="child">Demo</div>
  3. </div>
  1. .parent {
  2. position: relative;
  3. width: 400px;
  4. height: 400px;
  5. background: skyblue;
  6. }
  7. .child {
  8. position: absolute;
  9. left: 50%;
  10. top: 50%;
  11. transform: translate(-50%, -50%);
  12. width: 200px;
  13. height: 200px;
  14. background: pink;
  15. }

2 弹性模型

  1. <div class="parent">
  2. <div class="child">弹性模型</div>
  3. </div>
  1. .parent {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. width: 400px;
  6. height: 400px;
  7. background: skyblue;
  8. }
  9. .child {
  10. width: 200px;
  11. height: 200px;
  12. background: pink;
  13. }

3 单元格方式

  1. <div class="parent">
  2. <div class="child">单元格方式</div>
  3. </div>
  1. .parent {
  2. display: table-cell;
  3. text-align: center;
  4. vertical-align: middle;
  5. width: 400px;
  6. height: 400px;
  7. background: skyblue;
  8. }
  9. .child {
  10. display: inline-block;
  11. width: 200px;
  12. height: 200px;
  13. background: pink;
  14. }

原文链接:http://www.cnblogs.com/0x29a/p/11229348.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号