让一个块级元素垂直居中的几种方法

让一个块级元素垂直居中的几种方法第一种：父元素display: flex+align-items: center第二种：父元素display: flex+子元素 align-self: center第三种：子绝父相+top第四种：子绝父相+子元素top、bottom为0+ margin: auto第五种：transform: translateY第六种：父元素display: table-cell

蛞蝓不孤寡

3704人浏览 · 2021-03-20 11:47:30

蛞蝓不孤寡 · 2021-03-20 11:47:30 发布

让一个块级元素垂直居中的几种方法

关于设置垂直居中，可能有很多人第一反应就是可以设置line-height为父元素的高实现垂直居中，但是这种方法只适用于子元素为单行文本的情况。那么块级元素的垂直居中该怎么设置呢？

第一种：父元素display: flex+align-items: center

<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 205, 207);
            display: flex;
            align-items: center;
        }
        .contain{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 160, 131);
        }
    </style>
    <div class="container">
        <div class="contain"></div>
    </div>
</body>

思考：display:flex为弹性布局，align-items 属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。属性值center定义了元素位于容器的中心。
注：设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

第二种：父元素display: flex+子元素 align-self: center

<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 205, 207);
            display: flex;
        }
        .contain{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 160, 131);
            align-self: center;
        }
    </style>
    <div class="container">
        <div class="contain"></div>
    </div>
</body>

思考：和上面方法类似，.align-self 设置的是子元素；align-items 设置的是父元素。
align-self 属性定义flex子项单独在侧轴方向上的对齐方式。

第三种：子绝父相+top

<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 205, 207);
            position: relative;
        }
        .contain{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 160, 131);
            position: absolute;
            top: 25%;
        }
    </style>
    <div class="container">
        <div class="contain"></div>
    </div>
</body>

思考：设置百分比定位是以父元素的比例来计算的，将子元素的top值设置为父元素的25%，就能实现子元素的垂直居中

第四种：子绝父相+子元素top、bottom为0+ margin: auto

<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 205, 207);
            position: relative;
        }
        .contain{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 160, 131);
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <div class="container">
        <div class="contain"></div>
    </div>
</body>

思考：若想让子元素垂直正中，可以在子元素上加上right:0;left:0

第五种：transform: translateY

<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 205, 207);
        }
        .contain{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 160, 131);
            transform: translateY(50%);
        }
    </style>
    <div class="container">
        <div class="contain"></div>
    </div>
</body>

思考：translateY() ：通过给定Y方向的数目指定一个translation。只向Y轴进行移动，基点在元素心点，可以通过transform改变基点位置。如：transform:translateY(20px)，正数为向上，负数为向下

第六种：父元素display: table-cell+vertical-align: middle

<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 205, 207);
            display: table-cell;
            vertical-align: middle;
        }
        .contain{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 160, 131);
        }
    </style>
    <div class="container">
        <div class="contain"></div>
    </div>
</body>

思考：在制作网页的时候，我们使用display:table-cell让大小不固定的元素并且垂直居中。
一般建议，在使用display:table-cell的时候，不要使用float属性尽量不要使用，display:table-cell对宽度特别敏感，并且对margin值是没有任何意义的。
注意：不能将display:inline-block替代display:table-cell。
vertical-align: middle适用于行内元素的垂直居中，块元素不可以。vertical-align是用来设置行内元素对齐方式的。说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素。

第七种：隐形div障眼法

<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 205, 207);
        }
        .hidden{
            height: 50px;
        }
        .contain{
            width: 100px;
            height: 100px;
            background-color: rgb(241, 160, 131);
        }
    </style>
    <div class="container">
        <div class="hidden"></div>
        <div class="contain"></div>
    </div>
</body>