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