绝对定位之盒子垂直水平居中的方法与固定定位

最新推荐文章于 2024-03-27 20:04:50 发布

一个好好的程序员

最新推荐文章于 2024-03-27 20:04:50 发布

阅读量1k

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_62823653/article/details/123274747

版权

绝对定位之盒子垂直水平居中的方法

/*绝对定位*/ 属性{position:absolute}

先水平方向居中

1.先让子盒子往右移动父盒子的一半

left: 50%;

2，再让子盒子往左移动自身宽度的一般 margin负值

margin-left: -50px;

然后竖直方向居中

1.先让子盒子往下移动父盒子的一半

top: 50%;

2.再让子盒子往上移动自身高度的一半 margin负值

margin-top: -50px;

具体操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位盒子居中</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box1 {
      /* 相对定位 */
      position: relative;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .box2 {
      /* 绝对定位 */
      position: absolute;
      /* 位置属性 */
      /* 先让子盒子往右移动父盒子的一半 */
      left: 50%;

      /* 再让子盒子往左移动自身宽度的一般 margin负值 */
      margin-left: -50px;
      /* 先让子盒子往下移动父盒子的一半 */
      top: 50%;
      /* 再让子盒子往上移动自身高度的一半 margin负值 */
      margin-top: -50px;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>

</html>

固定定位

属性：position: fixed;

特点

1 .需要配合方位属性来移动位置。

2 .相对于浏览器的可视区域进行移动位置。

3 .不占位置-脱标。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box1 {
      width: 300px;
      height: 300px;
    }

    .box2 {
      /* 固定定位 */
      position: fixed;
      /* 位置属性 */
      top: 50px;
      left: 0px;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box1">
    <p>
      固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位
    </p>
    <div class="box2"></div>
  </div>
</body>

</html>

一个好好的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
绝对定位之盒子垂直水平居中的方法与固定定位

绝对定位之盒子垂直水平居中的方法/*绝对定位*/ 属性{position:absolute}先水平方向居中1.先让子盒子往右移动父盒子的一半left: 50%;2，再让子盒子往左移动自身宽度的一般 margin负值margin-left: -50px;然后竖直方向居中1.先让子盒子往下移动父盒子的一半top: 50%;2.再让子盒子往上移动自身高度的一半 margin负值margin-top: -50px;具体操作<!DOCTYPE html&gt
复制链接

扫一扫