1 固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半，使元素水平垂直居中。
</head>
<style>
.box1{
border: solid 3px;
width: 400px;
height: 200px;
position: relative;
}
.img1{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="box1">
<img class="img1" src="t1.png" alt="">
</div>
</body>
2 未知宽高元素水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
.img1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}3 利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
.box1{
display: flex;
justify-content: center;
align-items: center;
}4 利用grid布局
利用grid实现水平垂直居中，兼容性较差，不推荐。
.box1{
display: flex;
place-items: center;
}5.边距布局
可以设置上下左右边距为0实现元素居中
.img1{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}本文共 188 个字数,平均阅读时长 ≈ 1分钟
评论 (0)