CSS实现水平垂直居中的几种方法

最新推荐文章于 2023-09-30 13:11:25 发布

man_tutu

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量506

点赞数

分类专栏： CSS 文章标签： css 水平垂直居中绝对定位居中 flexbox css居中

本文链接：https://blog.csdn.net/man_tutu/article/details/55055860

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在布局中，水平垂直居中这个问题经常会碰见，所以我就收集了比较常用的几种水平垂直居中的方法~ 方便自己寻找答案，也方便大家寻找！

1、利用margin负值

主要CSS代码：

position: absolute
left: 50%;
top: 50%;
width: (width)px;
height: (height)px;
margin-left: -(width/2)px; /*宽度的一半*/
margin-top: -(height/2)px; /*高度的一半*/

实现示例：

这里写图片描述

完整HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .container {
            position: relative;
            background: #006400;
            width: 600px;
            height: 400px;
        }
        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -25px;
            width: 100px;
            height: 50px;
            background: #98FB98;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
    </div>
</body>
</html>

这种方法必须要知道该元素的宽高才可以设置水平垂直居中，且margin-left的值为宽度的一半，margin-top的值为高度的一半。

如果不知道该元素的宽高，你还想用绝对定位的方法的话，可以使用transform来实现。
使用transform实现的优点：
1、可以不知道宽高
2、代码量少
缺点：
1、IE8不支持
2、可能干扰其他transform实现效果

主要CSS代码：

transform: translate(-50%, -50%); /*50%为自身尺寸的一半*/

实现效果如下：

这里写图片描述

完整HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .container {
            position: relative;
            background: #006400;
            width: 600px;
            height: 400px;
        }
        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #98FB98;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">哈哈哈</div>
    </div>
</body>
</html>

2、利用margin: auto实现绝对定位元素的居中

这里的要点就是：
1、上下左右都定位为0
2、使用margin: auto

主要CSS代码：

position: absolute; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0;
margin: auto;    /* 有了这个就自动居中了 */

实现示例：
这里写图片描述

完整HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .container {
            position: relative;
            background: #006400;
            width: 600px;
            height: 400px;
        }
        .center {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 80px;
            height: 80px;
            background: #98FB98;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
    </div>
</body>
</html>

3、设置display: table-cell

优点：
1、高度可变
2、内容溢出会将父元素撑开。
3、跨浏览器兼容性好。
缺点：
需要额外的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .container {
            background: #006400;
            width: 600px;
            height: 400px;
            display: table;
        }
        .wrap {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .center {
            background: #98FB98;
            width: 20%;
            height: 20%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrap">
            <div class="center"></div>
        </div>
    </div>
</body>
</html>

4、利用inline-block

将div设置成inline-block，之后，用处理图片垂直居中的方式处理即可。

主要CSS代码：

.container {
    display: table-cell;
    vertical-align: middle;
    text-align: center; 
}
.center {
    display: inline-block;
}

完整HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .container {
            background: #006400;
            width: 600px;
            height: 400px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .center {
            display: inline-block;
            background: #98FB98;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">哈哈哈</div>
    </div>
</body>
</html>

5、使用flexbox

flexbox是CSS3的新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。

主要CSS代码：

display: flex;
justify-content: center;
align-items: center;

完整HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .container {
            background: #006400;
            width: 600px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center {
            background: #98FB98;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">哈哈哈</div>
    </div>
</body>
</html>