css中div的三种条件的居中实现

在面试中经常会被问到问到关于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>

解析

上面的三种情况想看效果的自己自行注释另外的两种写法即可,这里主要想说的是第二种和第三种的关于绝对定位 和相对定位两种方式对于transform属性的设置的区别的说明