【css中div的三种条件的居中实现】在面试中经常会被问到问到关于css居中的问题,刚好看到了关于三种方式的居中就自己敲了一下,结果发现了一个细节的点,这里记录下来方便日后学习,也欢迎大家提出意见
1.如何居中div？2.浮动的div元素居中显示? 3.绝对定位的div居中显示?
.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 属性是参照元素自身的位置做移动,负数是向左移动,这是就是居中了}解析
上面的三种情况想看效果的自己自行注释另外的两种写法即可,这里主要想说的是第二种和第三种的关于绝对定位和相对定位两种方式对于transform属性的设置的区别的说明
