css一周遇到的问题

1如何水平排列居中？****
父元素： display: flex;
align-items: center;
justify-content: center;

子元素： margin:0 auto;
2九宫格怎么设置？
父元素： width: 400px;
display:flex;
flex-wrap: wrap;
border: 1px solid red;
子元素： width: calc(calc(400px /3) - 10px);/400/3根据需要几列来设置，注意10px与margin5px的倍数/
margin:5px;
height:130px;
box-sizing: border-box;/* box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。*/
border:1px solid #000;
border-radius: 5px;
background-color: #3399ff;
text-align: center;/图片文字居中/

3按钮里的文字怎么居中？
按钮文字居中line-height: 25px;
div居中：margin: 0 auto;
align-items: center;
按钮居中：margin: 0 auto;
图片文字居中：align-items: center;
4 margin-top无效怎么办？
解决的办法有两个：
1、使用浮动来解决，即将子层代码改为：<div style=“margin-top:200px;float:left”;>子层
2、在父元素使用padding-top来解决，即：
style=“padding-top:200px;”
5div里的内容排列不居中
父元素： display: flex;
flex-direction: row;
justify-content: space-between;
子元素： img{
width: 70px;
height: 20px;
margin-top: 40px;
margin-left: 10px;
}
button{

      margin-right: 10px;
      margin-top: 40px;
  }
  text.z{

      margin-top: 40px;
      margin-left: 10px;
  }
  示例图：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200919121603812.png#pic_center)

6怎么去除图片因display:inline-block 产生的间距？
父元素加上font-size=0;
7只是个人见解，不一定是对的，如果有错的希望大佬指出来哈