文章目录
css常用的水平居中
1. margin: 0 auto;
法(居中元素为块级元素)
没有设置宽度的话,会独占一行
2. 居中元素为行内元素(text-align:center
)
行内元素的特点: 行内元素的宽度为元素自身撑起的宽度,和其他元素在同一行,高度,宽度,内边距等都是不可控的,即设置padding-left,
padding-right, margin-left, margin-right, height, width 都无法生效
3. 块级元素宽度不确定,(display:inline-block 改变模型
)
用法
父盒子用: text-align: center;
子盒子用:display: inline-block;
4. 利用定位实现水平居中(已知宽度)
相对定位: 相对定位就是将元素偏离元素的默认位置,但是并没有脱离文档流,只是视觉上发生的偏移,不会改变元素的display 属性 绝对定位:
相对于设置了 相对定位的上层元素或者顶级元素的相对位置,无论设置的元素为块级元素还是行内元素,position 设置成absolute 之后
, 元素display 表现为 block, 元素脱离文档流,父元素无法知道该元素的高度
.container{
position: relative;
}
.container .box{
position: absolute;
width: 50px; /*设置宽度*/
left: 50%; /*左移50%*/
margin-left: -25px; /*修正位置*/
}
5. 利用absolute
定位,translate
实现水平居中(未知宽度)
.container .box{
font-size: 20px;
background-color: blue;
color: white;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 50px;
}
6. flex 布局实现
都是在父盒子里设置
父元素设置成flex 布局,可以将子元素设置为水平居中, (但是flex布局部分浏览器无法使用)
.container{
display: flex;
justify-content: center
}