主页 / 建站知识 /

绝对定位元素的水平垂直居中的方法（3种任选）

建站知识 2021-07-03 08:16www.168986.cn长沙网站建设

1.css实现居中

缺点需要提前知道元素的宽度和高度。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%; : 50%;
            border:1px solid #000;
            background:red;
            margin-: -200px;    / 高度的一半 /
            margin-left: -300px;    / 宽度的一半 /
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

2、css3实现水平垂直居中

注意无论元素的尺寸是多少，都可以居中。不过IE8以上才兼容这种写法，移动端可忽略。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%;
            : 50%;
            border:1px solid #000;
            background:red;
            transform: translate(-50%, -50%);    / 50%为自身尺寸的一半 /
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

3、marginauto实现居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 0;
            : 0; 
            right: 0; 
            bottom: 0;
            border:1px solid #000;
            background:red;
            margin: auto;    / 有了这个就自动居中了 /
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望多多支持狼蚁SEO！

上一篇：HTML5+CSS3 诱人的实例：3D立方体旋转动画实例 下一篇：左侧固定，右侧自适应（两种方法任选）

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by