html，将元素⽔平，垂直居中的四种⽅式将元素垂直，⽔平居中分两种情况：⼀个是元素尺⼨固定，⼆是元素尺⼨不固定
⼀.尺⼨固定
⽅法1：定位，50%，margin负距
.box{
width: 400px;
height: 300px;
border: 2px solid black;
/* 把元素变成定位元素 */
position: absolute;
/* 元素距离上，左都为50% */
left: 50%;
top: 50%;
/* 让元素的左外边距，上外边距为元素宽⾼的1/2 注意margin是负距*/
margin-top: -150px;html怎么让所有内容居中
margin-left: -200px;
}
图解：
⽅法2：四⽅为都为0 ，margin：auto
.box{
width: 400px;
height: 300px;
border: 2px solid black;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
图解：
3 ⽅法三，元素尺⼨不固定
.box2 {
position: absolute;
left: 50%;
top: 50%;
/* 设置元素的相对于⾃⾝的偏移度为负50%(也就是元素⾃⾝尺⼨的⼀半)*/ transform: translate(-50%, -50%);
}
4.⽅法四：使⽤伪元素利⽤inline-block与vertical-align配合伪元素达到垂直居中/* 背景左右居中 */
.dialog_container {
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
}
/
* 伪元素上下居中 */
.dialog_container:after {
display: inline-block;
width: 0;
height: 100%;
content: "";
vertical-align: middle;
}
/* 真正居中的元素 */
.dialog_box {
display: inline-block;
vertical-align: middle;
text-align: left;
border: 1px solid black;
}
补充：将元素⽔平居中⽐较简单
1.块级元素居中 margin 和width配合
2.内联元素居中给其⽗级元素加text-align:center

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