三种绝对定位元素的水平垂直居中的办法

程序员文章站 2022-03-17 13:17:21

...

这次给大家带来三种绝对定位元素的水平垂直居中的办法，实现绝对定位元素水平垂直居的注意事项有哪些，下面就是实战案例，一起来看一下。

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>
    <p class="box">
    </p>
</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>
    <p class="box">
    </p>
</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>
    <p class="box">
    </p>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

三种绝对定位元素的水平垂直居中的办法

子盒子在父盒子内保持垂直水平居中的多种方案--已知子元素高度、未知子元素高度

老板的手机收到一个红包，为什么红包没居中？如何让一个元素水平垂直居中？

CSS元素水平垂直居中的方法

HTML技巧篇：实现元素水平与垂直居中的几种方式

CSS实现子元素div水平垂直居中的示例

子盒子在父盒子内保持垂直水平居中的多种方案--已知子元素高度、未知子元素高度

CSS设置行内元素和块级元素的水平居中、垂直居中_html/css_WEB-ITnose

元素水平垂直居中的css3实现实例代码

常见的几种 CSS 水平垂直居中解决办法_html/css_WEB-ITnose

元素水平垂直居中的css3实现实例代码