绝对定位水平垂直居中（HTML、CSS）

电玩女神 2023-10-03 13:24 133阅读 0赞

绝对定位水平垂直居中（HTML、CSS）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>绝对定位水平垂直居中</title>
  8.     <style>
  9.         .box {
  11.             position: absolute;
  12.             /*   1.left 走50% 父容器宽度的一半 */
  13.             left: 50%;
  14.             /*  2、margin 负值  往左边走 自己盒子宽度的一半 */
  15.             margin-left: -100px;
  16.             /*   以上是水平居中 */
  19.             top: 50%;
  20.             margin-top: -100px;
  21.             /*    以上是垂直居中 */
  23.             width: 200px;
  24.             height: 200px;
  25.             background-color: skyblue;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <div class="box"></div>
  32. </body>
  34. </html>

发表评论

表情：
评论列表 （有 0 条评论，133人围观）

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

相关阅读

    相关 水平垂直居中

    （1）水平居中： 元素为行内元素，设置父元素text-align:center 如果元素宽度固定，可以设置左右margin为auto 如果元素为绝对定位（或

    你的名字你的名字/ 0 赞/ 359 阅读