CSS 垂直居中方法总结

最新推荐文章于 2024-09-09 20:11:58 发布

谁点的猪脚饭

最新推荐文章于 2024-09-09 20:11:58 发布

阅读量387

点赞数 11

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

本文链接：https://blog.csdn.net/liuguowei14/article/details/141932755

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前情提要

最近在改页面样式时，经常用到弹性布局，那用起来可太舒服了。改着改着又想起来了，我曾经磕磕巴巴修改样式的岁月，当时没有flex，每次要垂直居中都很费劲，还要面临各种各样的布局问题，今天想起来正好总结一下。

PS：为了方便大家查看，我会把差不多的垂直居中方法，按顺序排在一起，方便大家看。

flex垂直居中法

这个是css3出了以后涌现的新属性，用起来非常得劲儿，各种布局都能搞，小伙伴们感兴趣可以去了解一下。

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
        /* 垂直居中 */
        display: flex;
        align-items: center;
    }
</style>

<body>
    <div class="parent">
        <div>flex垂直居中法</div>
    </div>
</body>

</html>

grid垂直居中法

该属性也是css3后涌现的，和flex一样各种布局都能搞，缺点就是支持性比flex更差一点。

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
        /* 垂直居中 */
        display: grid;
        align-items: center;
    }
</style>

<body>
    <div class="parent">
        <div>grid垂直居中法</div>
    </div>
</body>

</html>

translateY垂直居中法

该属性也是css3的方法，是通过与边距属性结合来实现的，这个边距可以是 margin、padding ，或是设置了绝对定位的 top、bottom 。

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
    }

    .child {
        /* 垂直居中 */
        padding-top: 50%;
        transform: translateY(-50%);
    }
</style>

<body>
    <div class="parent">
        <div class="child">translateY垂直居中法</div>
    </div>
</body>

</html>

table-cell垂直居中法

该方法是通过与 vertical-align: middle 属性结合实现的，简单理解就是把 div 当成了一个单元格，并通过 vertical-align 属性实现了居中变化

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
        /* 垂直居中 */
        display: table-cell;
        vertical-align: middle;
    }
</style>

<body>
    <div class="parent">
        <div>table-cell垂直居中法</div>
    </div>
</body>
</html>

writing-mode垂直居中法

该方法是通过修改 writing-mode 属性，改变文字排列方向的方式实现居中，缺点是需要将子级元素修改为内联元素。

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
        /* 垂直居中 */
        writing-mode: vertical-lr;
        text-align: center;
    }

    .child {
        display: inline-block;
        writing-mode: horizontal-tb;
    }
</style>
<body>
    <div class="parent">
        <div class="child">writing-mode垂直居中法</div>
    </div>
</body>
</html>

absolute垂直居中法

该方法是通过与外边距margin:auto属性结合实现居中的，但缺点是子级元素必须有高度，如果子级是自扩展高就没办法了。

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
        position: relative;
    }

    .child {
        height: 20px;
        /* 垂直居中 */
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
</style>

<body>
    <div class="parent">
        <div class="child">absolute垂直居中法</div>
    </div>
</body>

</html>

line-height垂直居中法

该方法与 absolute 垂直居中法对应，他的缺点是必须知道父级元素的高度，如果父级是自扩展高就没办法了。

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
        /* 垂直居中 */
        line-height: 200px;
    }
</style>

<body>
    <div class="parent">
        <div>line-height垂直居中法</div>
    </div>
</body>

</html>

padding垂直居中法

这个是我刚入行时常用的方法，缺点是必须知道父级元素高和元素高，算是比较新手的方法。

<html>
<style>
    .parent {
        width: 400px;
        height: 200px;
        border: solid 1px;
        /* 垂直居中 */
        box-sizing: border-box;
        padding-top: 90px; /* (父级高 - 子级高) / 2 */
    }
    .child{
        height: 20px;
    }
</style>

<body>
    <div class="parent">
        <div class="child">padding垂直居中法</div>
    </div>
</body>
</html>

谁点的猪脚饭

关注

11
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS 垂直居中方法总结

最近在改页面样式时，经常用到弹性布局，那用起来可太舒服了。改着改着又想起来了，我曾经磕磕巴巴修改样式的岁月，当时没有flex，每次要垂直居中都很费劲，还要面临各种各样的布局问题，今天想起来正好总结一下。
复制链接

扫一扫

专栏目录