css中一个div怎么水平居中的几种方法

今天在学习react的时候，遇到了这个问题，特来复习回想一下这个css中百分之90%都会遇到的问题。

一.已知父元素的宽度，已知子元素的宽度

1.absolute+负margin

父div {
          width:100vw,
        };

子div {
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;      // 注意 到这一步是相对于div的左上角的位置来说的偏移量,所以现在还没水平居中
    
    margin-top:-100px;
    margin-left:-100px; //这两步的意思是回退自身长宽的一半，恰好水平居中

这个地方对刚接触css的新手很容易迷，为什么要回退两步呢？刚开始的时候我也想不明白，随着后面学习的深入，我逐渐醒悟过来：如下图所示，带入自己的思考，你很快就会明白为什么要偏移负的margin了  (tips：你已经知道子div的宽度了哦)

2.absolute和margin:auto

 

3.flex布局

 

 

3.父元素变为table-cell布局(不建议使用，仅使用一些页面单一的时候吧还是)

 

 

 

 

 

二.已知父元素的宽度（但是子元素的宽度不确定）

子元素的也是绝对定位，left和top还是50%;设置子元素translate各百分之五十就可以了

 transform: translate(-50%,-50%);