1.通过flex来实现
Document
.box{
width:800px;
height:800px;
border:1pxsolid#000;
display: flex;
/*控制元素在主轴的对齐方式*/
justify-content: center;
/*控制默认的一行的对齐方式*/
align-items: center;
margin:0auto;
}
2.通过table来实现
table{
width:800px;
height:500px;
border:1pxsolid#000;
}
td{
/*控制行内块居中*/
text-align: center;
}
/*div{*/
/*依然可以不用写这个属性，inline-block，一样垂直居中*/
/*行内元素不会继承父级的宽度
/*display: inline-block;*/
/*}*/
3.通过定位transform来实现：
*{
margin:0;
padding:0;
}
.box{
width:800px;
height:400px;
border:1pxsolid#000;
margin:0auto;
position: relative;
}
.box1{
text-align: center;
width:400px;
height:200px;
position: absolute;
overflow: hidden;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
4.通过行内块和vertical-align实现（这种方式必须要添加一个空标签）
.box{
width:700px;
height:500px;
border:1pxsolid#000;
text-align: center;
margin:0auto;
}
.box1{
vertical-align: middle;
display: inline-block;
}
.tips{
width:1px;
height:100%;
/*background-color: red;*/
vertical-align: middle;
display: inline-block;
}
5.通过table-cell来实现
/*这样写的缺点在于，大盒子如果转成table-cell，那么这个盒子便设置不了margin了。*/
.box{
width:800px;
height:500px;
border:1pxsolid#000;
text-align: center;
vertical-align: middle;
display: table-cell;
}
/*这里的 inline-block 可以不用写，不会有任何问题*/
/*.box1{
display: inline-block;
vertical-align: middle;
}*/
网友评论