css如何实现盒子的垂直水平居中

发布时间:2022-03-28 10:39:22 作者:小新
来源:亿速云 阅读:212

这篇文章主要介绍css如何实现盒子的垂直水平居中,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

盒子的垂直水平居中

  .outer{
  width: 300px;
  height: 300px;
  background-color: gainsboro;
  text-align: center;
  line-height: 100px;
  /*由于触发了BFC规范,可以解决margin塌陷,完成垂直的居中*/
  overflow: hidden;
  margin: 0 auto;
  }
  .inner{
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 100px auto;
  }
  <div class="outer">
  <div class="inner">盒子居中</div>
  </div>

以上是“css如何实现盒子的垂直水平居中”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css如何实现水平垂直居中
  2. CSS实现垂直水平居中的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:C++怎么实现验证括号

下一篇:C++内存池如何实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》