弹性盒子垂直水平居中的9种方法

最新推荐文章于 2025-05-16 09:49:31 发布

H大东

最新推荐文章于 2025-05-16 09:49:31 发布

阅读量7.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：经典面试文章标签： css

5 篇文章

订阅专栏

博客中列举了九种方法，但未明确方法具体内容。从标签推测可能与CSS相关信息技术有关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

父元素 {
display: grid;
align-items: center;
justify-items: center;
}

方法二：

父元素 {
display: grid;
align-items: center;
justify-content: center;
}

方法三：

父元素{
display: grid;
}
子元素 {
margin: auto;
}

方法四：

父元素 {
display: flex;
align-items: center;
justify-content: center;
}

方法五：

父元素{
display: flex;
}
子元素 {
margin: auto;
}

方法六：

父元素 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
子元素 {
display: inline-block;
}

方法七：

父元素 {
position: relative;
}
子元素 {
position: absolute;
left: 50%;
top: 50%;
transfrom: translate(-50%, -50%);
margin: 0;
}

方法八：

父元素 {
height: xx px;
text-align: center;
}
父元素::after {
content: '';
line-height:xx px;
}
子元素 {
display: inline-block;
}

方法九：

.box {
position: relative;
}
p {
/*必须要设置宽高*/
width: 100px;
height: 40px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}