当前位置：主页 > 查看内容

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

发布时间：2021-09-06 00:00| 有 位朋友查看

简介：1.css实现居中 缺点：需要提前知道元素的宽度和高度。 !doctype htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title style .box{ width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; border:1px solid #000; background:red……

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%; top: 50%;
            border:1px solid #000;
            background:red;
            margin-top: -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%;
            top: 50%;
            border:1px solid #000;
            background:red;
            transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

3、margin：auto实现居中

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

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


原文链接：https://m.jb51.net/css/521372.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：HTML5+CSS3 诱人的实例：3D立方体旋转动画实例 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐