web前端常见的几种居中方法

最新推荐文章于 2024-05-12 05:38:55 发布

小张的代码历险记

最新推荐文章于 2024-05-12 05:38:55 发布

阅读量3.7k

点赞数 1

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/ZZSSXX_/article/details/131504842

版权

1.flex布局实现盒子居中：

将父盒子设为弹性容器，并使用主轴居中属性和侧轴居中属性。

公共结构代码：

<body>
  <div class="demo">
    <div class="box"></div>
  </div>
</body>

代码示例：

  <style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
    }    
  </style>

2.定位+位移实现盒子居中：

使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的宽高各一半，再使用位移往回移动子盒子自身的一半。

代码示例：

<style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      position: relative;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }   
  </style>

3.定位+外边距实现盒子居中：

使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的一半，再使用外边距移动子盒子的一半。但这种方法的缺点是盒子的大小必须是固定的。

代码示例：

<style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      position: relative;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
    } 
  </style>

4.定位+外边距为auto实现盒子居中：

使用定位(父盒子相对定位，子盒子绝对定位)将四个方位名词的值都设为0，margin的值设为auto。

代码示例：

<style>
    .demo{
      width: 500px;
      height: 500px;
      background-color: #f00;
      position: relative;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: #0f0;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;      
    } 
  </style>

使用频率：前两种方法使用最多（前端开发必会），第三种有致命缺点基本不使用，第四种属于拓展知识范围正经开发不会使用。

小张的代码历险记

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
web前端常见的几种居中方法

使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的一半，再使用外边距移动子盒子的一半。但这种方法的缺点是盒子的大小必须是固定的。使用频率：前两种方法使用最多（前端开发必会），第三种有致命缺点基本不使用，第四种属于拓展知识范围正经开发不会使用。使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的宽高各一半，再使用位移往回移动子盒子自身的一半。使用定位(父盒子相对定位，子盒子绝对定位)将四个方位名词的值都设为0，margin的值设为auto。将父盒子设为弹性容器，并使用主轴居中属性和侧轴居中属性。
复制链接

扫一扫