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的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 518 阅读