关于div的垂直居中的几种方法

nnk_

于 2017-12-11 16:22:18 发布

阅读量161

点赞数

分类专栏： css布局垂直居中

垂直居中同时被 2 个专栏收录

1 篇文章

订阅专栏

css布局

0 篇文章

订阅专栏

本文介绍了几种使用CSS实现元素垂直居中的方法，包括利用绝对定位、相对定位、display:table-cell属性以及Flex布局等，适用于不同场景的需求。

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.利用display:table-cell属性使内容垂直居中

.five{
             display:table-cell;
             vertical-align:middle;
             text-align:center;
             width:120px;
             height:120px;
             background:purple;
}

Flex 布局：

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}