HTML水平居中和竖直居中简单实现 小白推荐收藏

1在没有浮动的情况下，我们可以让需要居中的块级元素设为inline/inline-block，然后在其父元素上添加text-aline:center;即可。如果想要居中的块级元素是内联元素（span，img，a等），直接在其父元素上添加text-align：center；即可。

###如图

.father{
width: 200px;
height: 50px;
background-color: aqua;
text-align: center;
}
.son{
width: 100px;
height: 50px;
background-color: brown;
display: inline-block;
}

</style>


margin：0 auto;水平居中使用

必须是块元素 不行可以把元素改成display block 必须要有宽

3 vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;