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

来源：互联网发布：电脑无线wifi软件编辑：程序博客网时间：2024/06/06 17:01

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

张老师的博客原文：小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 lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style>        * {            margin: 0;            padding: 0;        }        .content {            position: absolute;            left: 20%;            right: 20%;            top: 20%;            bottom: 20%;            background-color: #cdcdcd;        }    </style></head><body>    <div class="content"></div></body></html>

绝对定位和translate实现

<!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;            left: 50%;            top: 50%;            width: 600px;            height: 400px;            background-color: #cdcdcd;            transform: translate(-50%, -50%);        }    </style></head><body>    <div class="content">        我水平垂直居中啦    </div>    <script type="text/javascript">    </script></body></html>

绝对定位和margin:auto实现

<!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;            left: 0;            top: 0;            bottom: 0;            right: 0;            width: 600px;            height: 400px;            background-color: #cdcdcd;            margin: auto;        }    </style></head><body>    <div class="content">        我水平垂直居中啦    </div>    <script type="text/javascript">    </script></body></html>

2、利用JavaScript实现水平垂直居中（在两个window事件中都写一次，是为了在页面进行伸缩变换的时候也可以保存水平垂直居中）

<!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;        }    </style></head><body>    <div class="content">        我水平垂直居中啦    </div>    <script type="text/javascript">        var oContent;        var clientWidth;        var clientHeight;        var oContentWidth;        var oContentHeight;        window.onload = function() {            // 获取content的DOM            oContent = document.querySelector(".content");            // 获取页面可视区的宽度            clientWidth = document.documentElement.clientWidth;            // 获取页面可视区的高度            clientHeight = document.documentElement.clientHeight;            // 获取content的宽度            oContentWidth = oContent.offsetWidth;            // 获取content的高度            oContentHeight = oContent.offsetHeight;            // 设置左边距            oContent.style.left = (clientWidth - oContentWidth) / 2 + 'px';            oContent.style.top = (clientHeight - oContentHeight) / 2 + 'px';        }        window.onresize = function() {            // 获取content的DOM            oContent = document.querySelector(".content");            // 获取页面可视区的宽度            clientWidth = document.documentElement.clientWidth;            // 获取页面可视区的高度            clientHeight = document.documentElement.clientHeight;            // 获取content的宽度            oContentWidth = oContent.offsetWidth;            // 获取content的高度            oContentHeight = oContent.offsetHeight;            // 设置左边距            oContent.style.left = (clientWidth - oContentWidth) / 2 + 'px';            oContent.style.top = (clientHeight - oContentHeight) / 2 + 'px';        }    </script></body></html>

总结：关于margin:auto为什么可以实现，建议去看看张鑫旭老师的博客解释。上面的JavaScript也有很多种写法，上面的算是最蠢的一种了，只是说明可以实现，用的话，不要万不得已就别用了，比较几个css样式就可以解决的事情，干嘛还用JavaScript。
（完）

阅读全文

0 0