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

原创

于 2017-11-11 09:58:12 发布 · 930 阅读

2 ·

CC 4.0 BY-SA版权

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

文章标签：

#css #水平垂直居中 #javascript

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

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

张老师的博客原文：小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>