css居中布局,不同的布局用来对应不同的场景

1.Grid

先在父元素上设置grid布局 

display: grid;

grid: var(--居中);

指定子元素在中心位置 

grid-area: 中;
给子元素设置宽高，
width: 150px;

height: 150px;

2.绝对定位实现

先在父元素上设置相对定位 
position: relative 

给子元素 绝对定位 
position: absolute; 
上下左右全部为0 
top: 0; right: 0; bottom: 0; left: 0; 
给定宽高  
width: 70%; height: 25%; 
令外边距自动填充
margin: auto;

3.绝对定位 + 负边距

先在父元素上设置相对定位 
position: relative 
给子元素绝对定位 
position: absolute;
 上方和左方为50% 
top: 50%; left: 50%;
 给定宽高 
 width: 300px; height: 200px; 
上外边距为负的给定高度的一半 
 margin-top: -100px; 
左外边距为负的给定宽度的一半 

 margin-left: -150px;

4.绝对定位 + 平移

先在父元素上设置相对定位  

position: relative 

 给子元素绝对定位 

position: absolute;

上方和左方为50% 
top: 50%; left: 50%;
不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 
padding: 10px;
这个50%是相对于自身宽高而言的 
transform: translate(-50%, -50%);

5.网格 Grid 实现

令其父元素变成网格布局 
display: grid;

令其子元素居中 

place-items: center;

6.Flex 弹性盒子

父元素 令其变成弹性布局 
display: flex;
令其子元素自动外边距 

 margin: auto;

7.表格布局

父元素上
display: table-cell;
text-align: center;
vertical-align: center;
子元素上设置
display: inline-block;