在面试中常常会被问到问到对于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属性的设置的区别的阐明