CSS垂直居中方案整理

最新推荐文章于 2024-11-06 00:51:08 发布

安然同学

最新推荐文章于 2024-11-06 00:51:08 发布

阅读量389

点赞数

分类专栏：前端 CSS 文章标签： CSS 前端

本文链接：https://blog.youkuaiyun.com/a1040146674/article/details/80295703

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

CSS各种水平垂直居中方案整理

代码github地址

1_内联元素水平居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table)inline-flex元素水平居中都有效.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #test {
            width: 100%;
            height: 100px;
            border: 1px dashed pink;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="test">啦啦啦居中啦</div>
</body>
</html>

02_块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            width: 200px;
            height: 200px;
            background: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

03_多块级元素水平居中

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为
inline-block和父容器的text-align属性从而使多块级元素水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        text-align: center;
    }
    #container > .inner{
        width: 200px;
        height: 200px;
        background: pink;
        display: inline-block;
        margin: 10px;
    }
</style>
<div id="container">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>
</body>
</html>

04_利用display: flex

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        display: flex;
        justify-content: center;
    }
    #container > .inner{
        width: 200px;
        height: 200px;
        background: pink;
    }
</style>
<div id="container">
    <div class="inner"></div>
</div>
</body>
</html>

05_单行内联(inline-)元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            height: 120px;
            line-height: 120px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="test">啦啦啦垂直居中啦</div>
</body>
</html>

06_利用表布局（table）多行元素垂直居中

利用表布局的vertical-align: middle可以实现子元素的垂直居中。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        .center-table {
            display: table;
            height: 140px;
            border: 2px dashed pink;
        }
        .v-cell {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="center-table">
    <p class="v-cell">The more technology you learn, the more you realize how little you know.</p>
    <p class="v-cell">The more technology you learn, the more you realize how little you know.</p>
    <p class="v-cell">The more technology you learn, the more you realize how little you know.</p>
</div>
</body>
</html>

07_多行元素垂直居中flex版

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .center-flex {
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: pink;
        }

    </style>
</head>
<body>
<div class="center-flex">
    <p>The more technology you learn, the more you realize how little you know.</p>
</div>
</body>
</html>

08_伪元素法

在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        .ghost-center {
            position: relative;
            border: 2px dashed #f69c55;
            padding: 10px 0;
        }
        .ghost-center::after {
            content: " ";
            display: inline-block;
            height: 100%;
            width: 2px;
            vertical-align: middle;
        }
        .ghost-center p {
            display: inline-block;
            vertical-align: middle;
            width: 12rem;
            padding:1rem;
            background: pink;
        }
    </style>
</head>
<body>
<div class="ghost-center">
    <p>伪元素实现垂直居中</p>
</div>
</body>
</html>

09_固定高度的块级元素垂直居中

知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
            top: 50%;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div id="test">

    </div>
</body>
</html>

10_未知高度的块级元素垂直居中

当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: pink;
        }
    </style>
</head>
<body>
    <div id="test">
        哈哈哈哈不知道多高哦<br>哈哈哈哈不知道多高哦<br>哈哈哈哈不知道多高哦<br>哈哈哈哈不知道多高哦<br>
    </div>
</body>
</html>

11_固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

12_未知宽高元素水平垂直居中

利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            background: pink;
        }
    </style>
</head>
<body>
<div id="test">
哈哈哈哈不知道多高哦<br>哈哈哈哈不知道多高哦<br>哈哈哈哈不知道多高哦<br>哈哈哈哈不知道多高哦<br>
</div>
</body>
</html>

13_利用flex布局垂直水平居中

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        .parent {
            height: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px dashed #f69c55;
        }
        .child {
            padding: 20px;
            background: pink;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">Facebook wasn't built in a day.</div>
</div>
</body>
</html>

14_利用grid布局垂直水平居中

利用grid实现水平垂直居中，兼容性较差，不推荐。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent {
            height: 140px;
            display: grid;
            align-items:center;
            border: 2px dashed orange;
        }
        .child {
            margin:auto;
            padding: 20px;
            width:200px;
            background: pink;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">grid垂直水平居中（兼容性不是很好）</div>
</div>
</body>
</html>

15_屏幕上水平垂直居中

模拟table

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        .parent {
            height: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px dashed #f69c55;
        }
        .child {
            padding: 20px;
            background: pink;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">Facebook wasn't built in a day.</div>
</div>
</body>
</html>