前端CSS居中布局技巧详解
水平居中元素
方式一:CSS3 transform
.parent
{
position:
relative;
}
.child
{
position:
absolute;
left:
50%:
transform:
translateX(-50%);
}
方式二:flex 布局
.parent
{
display:
flex;
justify-content:
center;
}
适用于子元素为浮动,绝对定位,内联元素,均可水平居中。
居中的元素为常规文档流中的内联元素(display: inline)
常见的内联元素有:span, a, img, input, label 等等
.parent
{
text-align:
center;
}
居中的元素为常规文档流中的块元素(display: block)
常见的块元素:p, h1~h6, table, p, ul, li 等等
方式一:设置 margin
.parent
{
width:
100%;
}
.child
{
width:
600px;
height:
50px;
margin:
0
auto;
background:
#999;
}
方式二:修改为 inline-block 属性
.parent
{
text-align:
center;
}
.child
{
display:
inline-block;
}
.child
{
width:
100px;
float:
left;
position:
relative;
left:
50%;
margin-left:
-50px;
}
方式一:
.parent
{
position:
relative;
}
.child
{
position:
absolute;
width:
100px;
left:
50%;
margin-left:
-50px;
}
方式二:
.parent
{
position:
relative;
}
.child
{
position:
absolute;
width:
100px;
left:
0;
right:
0;
margin:
0
auto;
}
垂直居中元素
方式一:CSS3 transform
.parent
{
position:
relative;
}
.child
{
position:
absolute;
top:
50%;
transform:
translateY(-50%);
}
方式二:flex 布局
.parent
{
display:
flex;
align-items:
center;
}
适用于子元素为浮动,绝对定位,内联元素,均可垂直居中。
.text
{
line-height:
200px;
height:
200px;
}
方式一:
.parent
{
position:
relative;
}
.child{
position:
absolute;
top:
50%;
height:
100px;
margin-top:
-50px;
}
方式二:
.parent
{
position:
relative;
}
.child{
position:
absolute;
top:
0;
bottom:
0;
height:
100px;
margin:
auto
0;
}
水平垂直居中元素
p
{
width:
100px;
height:
100px;
margin:
auto;
position:
fixed;
//absolute
is ok
top:
0;
right:
0;
bottom:
0;
left:
0;
}
优点:
1.不仅可以实现在正中间,还可以在正左方,正右方
2.元素的宽高支持百分比 % 属性值和 min-/max- 属性
3.可以封装为一个公共类,可做弹出层
4.浏览器支持性好
.child
{
width:
100px;
height:
100px;
position:
absolute;
top:
50%;
left:
50%;
margin-left:
-50px;
margin-top:
-50px;
}
特点:
1.良好的跨浏览器特性,兼容 IE6 – IE7
2.灵活性差,不能自适应,宽高不支持百分比尺寸和 min-/max- 属性
.child
{
width:
100px;
height:
100px;
position:
absolute;
top:
50%;
left:
50%;
transform:
translate(-50%,
-50%);
}
特点:
1.内容可自适应,可以封装为一个公共类,可做弹出层
2.可能干扰其他 transform 效果
.parent
{
display:
flex;
justify-content:
center;
align-items:
center;
}
这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。
text
{
height:
100px;
line-height:
100px;
text-align:
center;
}
上一篇: 还在纠结火锅底料要不要用油炒吗
下一篇: 火锅涮菜有哪些