CSS实现水平垂直居中的数种方法整合

时间：2024-05-01 21:34:57

CSS实现水平垂直居中可以说是前端老生常谈的问题了，一般面试官问的时候面试者都会回答出来，但是继续追问还有没有其他方法的时候有可能就说不出来了。

本着学习知识的目的，特在此纪录CSS实现水平垂直居中的多种方法。

准备工作

我们先写一个简单的HTML文件，方便我们接下来进行效果实现

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <link rel="stylesheet" href="./index.css">

        <title>水平垂直居中</title>

    </head>

    <body>

        <div class="container">

            <div class="inner">水平垂直居中</div>

        </div>

    </body>

</html>
/* CSS文件 */

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

}

.inner{

    width: 100px;

    height: 100px;

    border: 1px solid red;

}

最终浏览器呈现的效果如下

CSS实现水平垂直居中的数种方法整合

水平居中

水平居中的方式有多种，总体来说可以使用flex、grid、text-align、margin等方法，我们要实现如下所示的效果

CSS实现水平垂直居中的数种方法整合

使用flex方法

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

    /* 新增 */

    display: flex;

    justify-content: center;

}

只需在父DOM元素中新增以上CSS即可实现水平居中

使用margin方法

.inner{

    width: 100px;

    height: 100px;

    border: 1px solid red;

    /* 新增 */

    margin: 0 auto;

}

注：这个方法适用于知道子dom元素宽度已知的情况下

使用text-align方法

要注意：text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，并不控制块元素自己的对齐，只控制他行内内容的对齐。

所以这个属性对于我的HTML文件是无效的，我们要把内部的div改为span即可生效，修改后的代码如下：

<body>

    <div class="container">

        <!-- 将div修改为span -->

        <span class="inner">水平垂直居中</span>

    </div>

</body>

CSS样式表修改为如下所示

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

    /* 新增 */

    text-align: center;

}

使用grid方法

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

    /* 新增 */

    display: grid;

    grid-template-rows: 1fr; /* 让inner的高度占满 */

    grid-template-columns: 1fr; /* 让inner的宽度占满 */

    justify-items: center; /* 让inner水平居中 */

}

关于grid的更多介绍详见张鑫旭的

相关文章