css div水平垂直居中

2023-09-13 19:55| 来源: 网络整理| 查看: 265

第一种：

使用table布局（不推荐）

我们垂直居中了，我们水平居中了 .vc{ position: fixed; display: table; width: 100%; height: 100%; overflow: hidden; .vci{ vertical-align: middle; display: table-cell; text-align: center; .content{ color: #333; border: 1px solid red; display: inline-block; padding: 30px; } } } 第二种我们垂直居中了，我们水平居中了 .vc{ height: 100%; text-align:center; font-size:0; .vci{ vertical-align:middle; display:inline-block; font-size:16px; } &::after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; } } 第三种我们垂直居中了，我们水平居中了 .vc{ height: 100%; display: flex; text-align: center; .vci{ margin: auto; } } 第四种（未知元素宽度）

使用定位

我们垂直居中了，我们水平居中了 .vc{ background-color: #FF8C00; width: 300px; height: 300px; position: relative; .vci{ background-color: #F00; position: absolute; max-width: 120px; max-height: 120px; overflow: hidden; overflow-y: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 30px; } } 第五种

flex布局

我们垂直居中了，我们水平居中了 .vc{ background-color: #FF8C00; width: 300px; height: 300px; display: flex;//flex布局 justify-content: center;//使子项目水平居中 align-items: center;//使子项目垂直居中 .vci{ background-color: #F00; width: 100px; min-height: 100px; padding: 10px; } }

【本文地址】

公司简介

联系我们