CSS水平垂直居中

1.利用定位 + margin:auto

2.flex布局

3.grid布局

一、利用position+margin:auto

<style>.outer {position: relative;  /*父亲相对定位*/width: 200px;height: 200px;background-color: red;}.inner {position: absolute;   /*儿子绝对定位*/top: 0;bottom: 0;left: 0;right: 0;margin:auto;   /*上下左右外边距为auto*/width: 100px;height: 100px;background-color: yellow;}</style><div class="outer"><div class="inner"></div>
</div>

 二、利用flex

<style>.outer {display: flex;    /*弹性布局*/justify-content: center;  /*水平居中*/align-items: center;  /*垂直居中*/width: 200px;height: 200px;background-color: red;}.inner {width: 100px;height: 100px;background-color: yellow;}</style><div class="outer"><div class="inner"></div>
</div>

三、gird布局

<style>.father {display: grid;align-items:center;justify-content: center;width: 200px;height: 200px;background: skyblue;}.son {width: 10px;height: 10px;border: 1px solid red}
</style><div class="father"><div class="son"></div>
</div>