参考
水平垂直居中
1、grid布局实现
<style>html,body{margin: 0;padding: 0;width: 100%;height: 100%;display: grid;place-content: center;}</style><body><div class="container" style="width: 100px; height: 100px; background: rgb(206, 100, 100)">块状元素</div></body>
实现效果
2、flex布局实现 flex+margin
<style>html,body{margin: 0;padding: 0;width: 100%;height: 100%;display: flex;}.container{margin: auto;}</style><body><div class="container" style="width: 100px; height: 100px; background: rgb(206, 100, 100)">块状元素</div></body>
实现效果如上
3、定位布局
<style>//子绝父相html,body{margin: 0;padding: 0;width: 100%;height: 100%;position: relative; //相对定位}.container{position: absolute; //绝对定位，相对于祖先元素位置移动，如果没有祖先元素则以浏览器为基准定位top: 50%;left: 50%;transform: translate(-50%, -50%); //将元素向左移动50%的宽度，向上移动50%的宽度}</style><body><div class="container" style="width: 400px; height: 400px; background: rgb(93, 185, 210)">块状元素</div><div class="container" style="color: red;">不定宽高的块状元素</div><span class="container" style="color: green;">行内元素</span></body>
块级元素水平居中
定宽：
给需要居中的块级元素加margin:0 auto；（块状元素的宽度一定要有）
块级元素垂直对齐
父元素设置display:flex和align-items：center；
要求：父元素必须显示设置height值
三、块级元素水平垂直居中
1、父元素（定高）设置
display:flex；
align-items：center；
块级元素（定宽）设置 margin:0 auto；
2、实现不定宽高水平垂直居中:（测试中块级元素和父元素都分别需要设置宽高）
父元素设置
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
