html子div垂直居中,div内的div水平垂直居中方式

第一种情况：不确定宽高在父级元素用padding确定上下居中

在子级元素用margin确定左右居中.dad {  border: 1px solid;  padding: 100px 0;

}.son {  border: 5px solid red;  width: 100px;  margin: 0 auto;

}

第二种情况：div的高度确定(全屏情况)

方法一：子级元素高度要确定的情况用position:absolute配合margin: auto来实现。body {  margin: 0;

}.dad {  border: 1px solid;  height: 100vh;  box-sizing: border-box;

}.son {  border: 5px solid red;  width: 100px;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  height: 100px;

}

方法二：子级元素宽度和高度都可以不确定的情况在父级元素添加下面代码display: flex;

justify-content: center;

align-items: center;

tips:如何实现一比一的自适应div?用padding-top: 100%;

作者：徐金俊

链接：https://www.jianshu.com/p/3cbd9b7cca69