CSS3技巧36：让内容垂直居中的三种方式

stones4zd

于 2023-12-09 13:02:43 发布

阅读量793

点赞数 9

分类专栏： HTML5_CSS3 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/weixin_42703239/article/details/134893642

版权

58 篇文章 14 订阅

订阅专栏

本文介绍了三种方法使内容在HTML容器中垂直居中：使用Flex布局的justify-content和align-items，Grid布局的place-items，以及Position定位配合transform。

摘要由CSDN通过智能技术生成

让内容垂直居中，是一个很重要的应用情景，在很多场合都会需要。这也是面试的时候，一些考官喜欢拿来初面的小题目。

这里，小结下让内容垂直居中的三种方式。

当然，读者如果有更好的方法，也可以提出来。

基本HTML：

<div class="big">
    <div class="small"></div>
</div>

基本CSS：

.big{
    width: 600px;
    height: 400px;
    background: #eee;
}
.small{
    width: 200px;
    height: 150px;
    background: #f00;
}

一、使用flex

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

.big{
    display: grid;
    place-items:center;
}

.big{
    display: grid;
}
.small{
    place-self: center;
}

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

关注