在不知道盒子高度的时候，让盒子中的子元素垂直居中

最新推荐文章于 2022-09-24 14:54:43 发布

简单的小伙子

最新推荐文章于 2022-09-24 14:54:43 发布

阅读量483

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_44226789/article/details/113915765

版权

笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了三种方法来实现网页元素在没有固定高度的情况下垂直居中：1) 使用绝对定位配合`top:50%`和`transform:translateY(-50%)`；2) 当父元素有高度时，仅需设置相对定位；3) 采用Flex布局快速实现居中。适用于现代浏览器且便于维护。

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

1、不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：
parentElement{
        position:relative;
    }
 
 childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
 }
2、若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可
    parentElement{
        height:xxx;
    }
    .childElement {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
3、不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：
parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}
最后使用了flex布局。达到了自己效果。