您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

实现水平垂直居中

时间:12-14来源:作者:点击数:
CDSY,CDSY.XYZ

1. flex 实现

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

2. 绝对定位配合 transform

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. 绝对定位配合 margin: auto;

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
CDSY,CDSY.XYZ
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐