css 通过绝对定位实现水平垂直居中

r囧r小猫 2022-05-13 11:40 402阅读 0赞

知识点: margin: auto;

效果图:

70

代码:

html:

  1. <div class="outer">
  2. <div class="inner"></div>
  3. </div>

css:

  1. .outer {
  2. width: 100vw;
  3. height: 100vh;
  4. position: relative;
  5. background: rgba(0,0,0,.6);
  6. }
  7. .inner {
  8. width: 50%;
  9. height: 400px;
  10. background: red;
  11. position: absolute;
  12. top: 0;
  13. bottom: 0;
  14. right: 0;
  15. left:0;
  16. margin: auto;
  17. }

发表评论

表情:
评论列表 (有 0 条评论,402人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS水平垂直居中

            在实际前端开发中,我们会遇到让一些元素居中的情况,如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多,现在小编在这里总结一下,以便开发的时候可以快