关于前端:css中div的三种条件的居中实现

42次阅读

共计 834 个字符，预计需要花费 3 分钟才能阅读完成。

在面试中常常会被问到问到对于 css 居中的问题, 刚好看到了对于三种形式的居中就本人敲了一下, 后果发现了一个细节的点, 这里记录下来不便日后学习, 也欢送大家提出意见

1. 如何居中 div？2. 浮动的 div 元素居中显示? 3. 相对定位的 div 居中显示?

    <style>
        .box {
          // 根底条件便于看到成果
          width: 300px;
          height: 300px;
          background-color: pink;
          
          //1.div 的居中显示
          margin:0 auto; // 该属性实现成果的条件是有宽度的块级元素
          
          //2. 浮动的 div 元素居中显示
          float:right;// 这个属性设置是右侧还是左侧是没有影响的
          position:relative;//relative 是绝对于本人一开始显示的地位的参照, 当初的参数看还是在 body 的最右侧
          right:50%;// 这里的 right 是绝对于最近的定位的父级元素没有找到就是绝对于 body,box 的右侧边到 body 的有内边距是 body 的一半的间隔, 算上 box 本人的宽度 box 的地位整体就是偏左的
          transform:tranlate(50%);// 这里 transform 属性是参照于元素本身的地位, 负数是向右挪动, 这样就显示居中了
          
          //3. 相对定位的 div 居中显示
          position:absoult;// 绝对定位是相较于最近的定位父级元素做参照, 这里是没有的就是绝对于 body 来做参照
          left:50%;// 示意 box 的左侧边间隔 body 的左内边距间隔是 body 的一半的宽度 box 的整体地位是偏差左边的
          transform:tranlate(-50%);// 一样的情理 transform 属性是参照元素本身的地位做挪动, 正数是向左挪动, 这是就是居中了
          
        }
    </style>
    <div class="box"></div>