用css和JavaScript分别实现水平垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

输出是最好的学习

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量862

点赞数

分类专栏：前端文章标签： css 水平垂直居中 javascript

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/78504572

版权

本文总结了从张鑫旭老师博客中学到的水平垂直居中方法，包括CSS的绝对定位普通实现、绝对定位结合translate和margin:auto的实现，以及JavaScript实现的水平垂直居中，并强调在页面伸缩时保持居中。建议优先使用CSS方法，避免不必要的JavaScript操作。

摘要由CSDN通过智能技术生成

前言：在看张鑫旭老师的博客的时候，发现了这个好东西，自己来总结一下，加深自己的印象

张老师的博客原文：小tip: margin:auto实现绝对定位元素的水平垂直居中

1、利用CSS实现水平垂直居中

绝对定位普通实现一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
            line-height: 400px;
            font-size: 34px;
        }
        .content {
            position: absolute;
            width: 600px;
            height: 400px;
            background-color: #cdcdcd;
            left: 50%;
            top: 50%;
            margin: -200px 0 0 -300px;
        }
    </style>
</head>
<body>
    <div class="content">
        我水平垂直居中啦
    </div>
</body>
</html>

绝对定位实现方法二

<!DOCTYPE html>
<html<

最低0.47元/天解锁文章

输出是最好的学习

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用css和JavaScript分别实现水平垂直居中

前言：在看张鑫旭老师的博客的时候，发现了这个好东西，自己来总结一下，加深自己的印象张老师的博客原文：小tip: margin:auto实现绝对定位元素的水平垂直居中1、利用绝对定位实现水平垂直居中html lang="en">head> meta charset="UTF-8"> title>welcometitle> style>
复制链接

扫一扫

专栏目录