css中⼀个div怎么⽔平居中的⼏种⽅法
今天在学习react的时候,遇到了这个问题,特来复习回想⼀下这个css中百分之90%都会遇到的问题。
⼀.已知⽗元素的宽度,已知⼦元素的宽度
1.absolute+负margin
⽗div {
width:100vw,
};
⼦div {
width:200px;
height:200px;
html怎么让所有内容居中
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%);