10种方法实现水平垂直居中

最新推荐文章于 2026-04-09 11:23:35 发布

原创最新推荐文章于 2026-04-09 11:23:35 发布 · 694 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

3 篇文章

订阅专栏

水平垂直居中是前端面试中的常见问题，涉及固定宽高和非固定宽高两类解决方案。固定宽高包括absolute配合负margin、margin:auto和calc方法。非固定宽高则涵盖absolute结合transform、flex布局、line-height、css-table、grid、table（非正规用法）以及writing-mode等方法。了解这些技巧有助于提升CSS基础。

水平垂直居中的问题，常常在前端面试中被问到，看似很简单的问题，却能考验面试者css基础的一道题目。
水平垂直居中问题主要分为两大类：
一、固定宽高类：
①absolute+负margin；

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            position: relative;
        }
        #box{
           background-color:red; 
           width: 100px;
           height: 100px;
           position: absolute;
           top:50%;
           left:50%;
           margin-top:-50px;
           margin-left:-50px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

②absolute+margin:auto；

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            position: relative;
        }
        #box{
            background-color:red; 
            width: 100px;
            height: 100px;
            position: absolute;
            top:0;
            left:0;
            right: 0;
            bottom: 0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

③absolute+calc
这种方法和第一种原理是相同的，只不过使用了css3的calc函数来动态计算了top和left值，实现了水平垂直居中的效果

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            position: relative;
        }
        #box{
            background-color:red; 
            width: 100px;
            height: 100px;
            position: absolute;
            top:calc(50% - 50px);
            left:calc(50% - 50px);
        } 
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

二、非固定宽高类：
①absolute+transform

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            position: relative;
        }
        #box{
            background-color: red;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

②flex布局

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #box{
            background-color: red; 
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

③lineheight方法

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            text-align: center;
            line-height: 300px;
        }
        #box{
            background-color: red; 
            display: inline-block;
            vertical-align:middle;
            line-height: initial;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

④css-table

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        #box{
            background-color: red; 
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

⑤grid

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            display: grid;
           
        }
        #box{
            background-color: red; 
            justify-self: center;
            align-self: center;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box">水平垂直居中</div>
    </div>
</body>
</html>

⑥table
这种方法虽然可以实现水平垂直布局，但是不能算是table的正规用法，所以只是提供来拓展思路，并不建议

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #wrapper{
            border: 1px solid black;
            width: 300px;
            height:300px;
            text-align: center;
        }
        #box{
            background-color: red; 
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tbody>
                <tr >
                    <td id="wrapper"><div id="box">水平垂直居中</div></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

⑦writing-mode
这种方法比较难理解，也从来没用过，参考了下边链接的文章才实现，不得不感慨下，牛人就是牛人，哈哈，学到了

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>水平垂直居中练习</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #body{
            border: 1px solid black;
            width: 300px;
            height:300px;
            writing-mode: vertical-lr;/*定义文本在水平/垂直方向如何排列 垂直方向内内容从上到下，水平方向从左到右 */
            text-align: center;
        }
        #wrapper{
            width: 100%;
            writing-mode:horizontal-tb; /*horizontal-tb：水平方向自上而下的书写方式。 */
            display: inline-block; 
            text-align: center;
        }
        #box{
            background-color:red; 
            display: inline-block;
            margin: auto;
            text-align: left;
        } 
    </style>
</head>
<body>
    <div id="body">
        <div id="wrapper">
            <div id="box">水平垂直居中</div>
        </div>
    </div>
</body>
</html>

参考文章：https://juejin.im/post/5b9a4477f265da0ad82bf921#heading-9