水平居中：
/*第一种方式*/
.level-parent{
width:500px;
height:300px;
text-align: center;
background: #026DDB;
}
.level-parent .child{
display: inline-block;
width:200px;
height: 100px;
background:#D81421;
}
/*子元素第二种布局方式*/
.level-parent .child{
display: table;
margin: 0 auto;
}
/*第二种方式：*/
.level-parent{
position: relative;
}
.level-parent .child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
垂直居中：
/*第一种方式：*/
.vertical-parent{
height:600px;
display: table-cell;
vertical-align: middle;
}
.vertical-parent .child{
height:300px;
}
/*第二种方式：*/
.vertical-parent{
position:relative;
height:600px;
}
.vertical-parent .child{
position: absolute;
top:50%;
transform: translateY(-50%);
}
垂直水平居中：
/*第一种布局方式*/
.parent{
height:600px;
width:200px;
background:#D81421;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.parent .child{
display: inline-block;
width:50px;
}
/*第二种布局方式*/
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
万能的flex：
.flex{
display: flex;
width:500px;
height:200px;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
div布局：
我是水平居中！
我是垂直居中！
我是垂直水平居中！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
