CSS布局——简洁、兼容性强的垂直水平居中方案

最新推荐文章于 2025-05-25 07:23:59 发布

唐小狼

最新推荐文章于 2025-05-25 07:23:59 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端工程师学习笔记

本文链接：https://blog.youkuaiyun.com/tangxiaolang101/article/details/51751067

前端工程师学习笔记专栏收录该内容

85 篇文章

订阅专栏

本文介绍了五种实现网页元素居中的方法，包括使用绝对定位、视窗单位、transform属性、Flexbox等技术手段，每种方法都有其适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、absolute，需要知道居中元素的宽与高

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background-color: goldenrod;
                margin: 0;
                padding: 0;
            }
            p{
                color: white;
            }
            .main{
                background-color: saddlebrown;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 500px;
                margin-left: -250px;
                margin-top: -250px;
                text-align: center;
            }
            /*这种方式需要知道居中元素的宽与高！！*/
        </style>
    </head>
    <body>
        <div class="main">
            <p>Center me please!</p>
        </div>
    </body>
</html>

2、利用css3的calc计算符，可以省两行代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background-color: goldenrod;
                margin: 0;
                padding: 0;
            }
            p{
                color: white;
            }
            .main{
                background-color: saddlebrown;
                position: absolute;
                width: 18em;
                height: 18em;                
                top:calc(50% - 9em);
                left:calc(50% - 9em);                
                text-align: center;
            }
            /*这种方式需要知道居中元素的宽与高！！*/
        </style>
    </head>
    <body>
        <div class="main">
            <p>Center me please!</p>
        </div>
    </body>
</html>

3、使用transform的translate属性，x和y轴上往回移动50%

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background-color: goldenrod;
                margin: 0;
                padding: 0;
            }
            p{
                color: white;
            }
            .main{
                background-color: saddlebrown;
                position: absolute;                
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);                
                text-align: center;
            }
            /*这种方式需要知道居中元素的宽与高！！*/
        </style>
    </head>
    <body>
        <div class="main">
            <p>Center me please!</p>
            <p>Center me please!</p>
        </div>
    </body>
</html>

以上的定位都用到了absolute，但是absolute对整个文档流的影响比较大。

4、视窗单位解决方案

不用absolute，就是不能使用top和left。那么，怎么将元素从top和left位置偏移50%的量呢，首先想到了margin，像这样：

.main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50% auto 0;
    transform: translateY(-50%);
}

如上图，结果布局很怪异，主要原因是margin的百分比计算是相对于父容器的width来计算的。父元素的width来计算，是width来计算的。当然，包括margin-top和margin-bottom也是这样的。

这个时候，神奇的viewport-relative就出现了，相对视图长度单位。
vw是相对于视窗的宽度，1vw相当于视图宽度的1%；
1vh相当于视窗高度的1%。

如果视窗的宽度小于高度，1vmin等于1vw，反之，如果视窗宽度大于高度，1vmin等于1vh
如果视窗的宽度大于高度，1vmax等于1vw，反之，如果视窗宽度小于高度，1vmax等于1vh

所以，上面的代码就有救了！！！

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background-color: goldenrod;
                margin: 0;
                padding: 0;
            }
            p{
                color: white;
            }
            .main{
                width: 18em;
                background-color: saddlebrown;
                margin: 50vh auto 0 auto;
                transform: translateY(-50%);                
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p>Center me please!</p>
            <p>Center me please!</p>
        </div>
    </body>

很完美的解决了这个问题。

5、Flexbox的解决方案

Flexbox的出现就是为了解决这样的问题，所以它无疑是最好的解决方案。唯一可惜的IE8不支持Flexbox，而国内还有相当一部分的IE8用户，全球大概有0.61%。使用Flexbox只需要两个样式，就可以搞定，在父元素上加上disp:flex,在垂直居中的元素上设置margin:auto。当然：父元素上min-height:100vh。
这条属性还是要的，它会影响垂直上的居中。

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background-color: goldenrod;
                margin: 0;
                padding: 0;
                display: flex;
                min-height: 100vh;
            }
            p{
                color: white;
            }
            .main{
 
                background-color: saddlebrown;
                margin: auto;                
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p>Center me please!</p>
            <p>Center me please!</p>
        </div>
    </body>

通过align-items和justify-content属性，使设置固定尺寸的main容器里面的文本居中。

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background-color: goldenrod;
                margin: 0;
                padding: 0;
                display: flex;
                min-height: 100vh;
            }
            p{
                color: white;
            }
            .main{                
                background-color: saddlebrown;
                margin: auto;                
                display: flex;
                align-items: center;
                justify-content: center;
                width: 18em;
                height: 18em;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p>Center me please!</p>
        </div>
    </body>