利用盒模型让元素在浏览器中垂直水平居中，改变浏览器窗口大小依然居中

最新推荐文章于 2024-09-30 10:20:26 发布

原创最新推荐文章于 2024-09-30 10:20:26 发布 · 920 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#元素居中

前端专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一种利用Flex布局实现网页元素垂直居中的方法。通过设置display为flex，并使用justify-content与align-items属性，可以轻松使div元素在页面上实现居中显示。此外，还提供了JavaScript代码来动态调整容器高度。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div{
        height: 32px;
        border: 1px solid red;
        font-size: 14px;
        line-height: 32px;
    }

</style>
<body class="box">
<div>
   垂直居中
</div>
</body>
</html>

<script>
    window.onload=function (ev) {
        var box = document.getElementsByClassName('box')[0]
        var height = window.innerHeight
        
        box.style.height = height+'px'

        window.onresize = function (ev2) {
          box.style.height = height+'px'
        }
    }
</script>