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

最新推荐文章于 2025-03-10 08:45:00 发布

seven_0-0

最新推荐文章于 2025-03-10 08:45:00 发布

阅读量613

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/her__0_0/article/details/105538760

版权

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

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

水平垂直居中的问题，常常在前端面试中被问到，看似很简单的问题，却能考验面试者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

最低0.47元/天解锁文章