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%);