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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。