css居中的方法

一.水平居中
1.块本身水平居中

div{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin:auto;
    }

2.对块的子内容 text align：center;
text align：center;
使用规则
1.只在块元素内部使用，直接用在内联元素上不生效。
2.会对块元素中的所有内联内容，文本内容和被转换的内联块对齐。
3.子块会继承text align：center;使得子块内的内联内容居中显示
3.display:flex;

display:flex;
justify-content: center;

二、块级元素垂直居中
1.verticle-align+lineheight
2.display单元格+verticle-align
3.绝对定位
4.弹性布局display:flex;
在伸缩容器上设置侧轴对齐方式align-items: center
5.网格布局display：grid;