乐趣区

css元素居中方法归纳

统一 HTML 代码:
<div class=”outer”>
<div class=”inner”></div>
</div>
相同的 css 代码抽取:
.inner{
width: 50px;
height: 50px;
background-color: aqua;
}
.outer{
border: 1px solid black;
}
①、margin:auto && 绝对定位

.inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.outer{
position: relative;
width:100px;
height: 100px;
}

注意点:①、absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。inner 设置了 absolute 定位,所以要在 outer 设置 relative,这样才能相对于 outer 进行相对定位,否则相对于 body 定位,因为默认是 static 定位。left、right 等不一定要设置为 0,只要 left 和 right 的值相等,即可实现水平居中。同理,top 和 bottom 的值相等,即可实现垂直居中。
②、margin 负值 && 相对定位
.inner{
position: relative;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* 外边距为自身宽高的一半 */
}

注意点:①、inner 元素要设为 relative②、margin 外边距为自身宽高的一半(负数)
③、CSS3 transform 属性
.inner{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

注意点:①、inner 元素要设为 relative②、transform 属性向元素应用 2D 或 3D 转换,translate(x,y) 定义 2D 转换
④、css flex 布局
.outer{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
最后在本文末尾还会提到 定位对于元素特征的改变 在介绍 css 元素居中方法之前,我们有必要认识一下元素的三种类型
html 元素有三种类型:
①、块状元素:如 div ——– display:block ②、内联元素:如 span ——display:inline ③、内联块元素:如 input —- display:inline-block
块状元素特征:(1)能够识别宽高 (2)margin 和 padding 的上下左右均对其有效(3) 可以自动换行 (4) 多个块状元素标签写在一起,默认排列方式为从上至下
行内元素特征:(1)设置宽高无效 (2) 对 margin 仅设置左右方向有效,上下无效;padding 设置上下左右都有效,即会撑大空间 在 IE7 的时候,padding-top 和 padding-bottom 无效 (3) 不会自动进行换行
行内块状元素特征:(1)不自动换行 (2) 能够识别宽高 (3) 默认排列方式为从左到右
在 position 设置为 fixed 或者 absolute 的时候,元素会脱离文档流 * 此时对于行内元素来说可以设置宽高

退出移动版