CSS中让
垂直居中的方法有多种，以下是几种可行的方法：
方法一：将
方法一：将设置为表格单元格（display: table-cell）
div {
display: table-cell;
vertical-align: middle;
}
将
的display属性设置为table-cell，用vertical-align属性垂直居中即可。但是这种方法的缺点是必须指定width和height。
方法二：使用绝对定位
div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
将
的position设置为absolute，再用top属性将它向下移动50%的距离，最后用transform属性将它再向上移动50%的距离即可。
方法三：使用弹性盒子（display:flex）
.container {
display: flex;
align-items: center;
justify-content: center;
}
将父级元素的display设置为flex，用align-items属性将子元素纵向居中，用justify-content属性将子元素横向居中。
方法四：使用grid网格布局
.container {
display: grid;
place-items: center;
}
相关文章
作者文章
-
如何在Linux中找到MySQL的myini文件位置？（详细步骤教程）
11分钟前
-
html中怎么设置盒子页面居中
23分钟前
-
css table的第一列加背景色
43分钟前
-
如何在MySQL中创建审计员（详细步骤和注意事项）
2小时前
-
html动态获取代码
2小时前
div {
display: table-cell;
vertical-align: middle;
}
将
的display属性设置为table-cell，用vertical-align属性垂直居中即可。但是这种方法的缺点是必须指定width和height。
方法二：使用绝对定位
div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
将
的position设置为absolute，再用top属性将它向下移动50%的距离，最后用transform属性将它再向上移动50%的距离即可。
方法三：使用弹性盒子（display:flex）
.container {
display: flex;
align-items: center;
justify-content: center;
}
将父级元素的display设置为flex，用align-items属性将子元素纵向居中，用justify-content属性将子元素横向居中。
方法四：使用grid网格布局
.container {
display: grid;
place-items: center;
}
相关文章
作者文章
- 如何在Linux中找到MySQL的myini文件位置？（详细步骤教程） 11分钟前
- html中怎么设置盒子页面居中 23分钟前
- css table的第一列加背景色 43分钟前
- 如何在MySQL中创建审计员（详细步骤和注意事项） 2小时前
- html动态获取代码 2小时前
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
