使用绝对定位实现居中的两种方法

最新推荐文章于 2023-05-17 11:58:25 发布

Evelyn-zhou

最新推荐文章于 2023-05-17 11:58:25 发布

阅读量2.1w

点赞数 19

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/ZQY1436556395/article/details/106258998

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

方法一：1.左右居中（绝对定位）
先给父元素开启相对定位，再给子元素开启绝对定位，然后将子元素向左移动自己的50%，使子元素的中点与父元素的起点对齐，然后再将子元素向右移动父元素的50%，这样子元素和父元素的中心点就刚好重合了

<style>
  .box1{
      width: 1000px;
      height: 50px;
      background-color: pink;
      position: relative;
  }
  .box2{
      width: 500px;
      height: 40px;
      background-color: yellow;
      position: absolute;
      transform: translate(-50%);
      left: 50%;
  }

</style>
<body>

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

再设置 transform: translate(0，-50%) top:50%即可以实现上下居中，合起来即可实现中心居中

.box1{
      width: 1000px;
      height: 400px;
      background-color: pink;
      position: relative;
  }
  .box2{
      width: 500px;
      height: 200px;
      background-color: yellow;
      position: absolute;
      transform: translate(-50%,-50%);
      left: 50%;
      top:50%

  }

</style>
<body>

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

方法二：如果只需要实现上下居中则：top:0,bottom:0,margin:auto 0
左右居中：left:0,right:0,margin:0 auto
中心居中：top:0,bottom:0,left:0,right:0,margin:auto

.box1{
      width: 1000px;
      height: 400px;
      background-color: pink;
      position: relative;
  }
  .box2{
      width: 500px;
      height: 200px;
      background-color: yellow;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto; 

  }

</style>
<body>

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

Evelyn-zhou

关注

19
点赞
踩
45

收藏

觉得还不错? 一键收藏
1
评论
使用绝对定位实现居中的两种方法

方法一：1.左右居中（绝对定位）先给父元素开启相对定位，再给子元素开启绝对定位，然后将子元素向左移动自己的50%，使子元素的中点与父元素的起点对齐，然后再将子元素向右移动父元素的50%，这样子元素和父元素的中心点就刚好重合了<style> .box1{ width: 1000px; height: 50px; background-color: pink; position: relative; } .box2{ wid
复制链接

扫一扫