【CSS】CSS实现水平垂直居中

南栀~zmt

已于 2022-08-30 21:02:37 修改

阅读量378

点赞数

分类专栏： CSS 文章标签：前端 css

于 2022-03-07 17:19:11 首次发布

本文链接：https://blog.csdn.net/qq_46658751/article/details/123332798

版权

CSS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

1. 绝对定位元素的水平居中
2. margin: auto；绝对定位
3. css3.0弹性盒子布局
4. 相对定位
5. vertical-align:middle
6. display:table实现

1. 绝对定位元素的水平居中

已知宽高的元素绝对定位的水平居中实现：

优点：工作中使用最多，兼容性很好。

缺点：需要提前知道元素的尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>已知宽高绝对定位元素的居中实现</title>
</head>
<style>
    .center-vertical {
        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -50px; /* 宽度的一半 */
        margin-top: -50px;   /* 高度的一半 */
    }
</style>
<body>
    <div class="center-vertical"></div>
</body>
</html>

实现效果：在这里插入图片描述

未知宽高的元素绝对定位水平垂直居中的实现：

使用 transform 代替 margin 。
transform 中 translate 偏移的百分比是相对于元素自身大小而言。

优点：不用考虑元素的宽高是多少
缺点：兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未知宽高绝对定位元素的居中实现</title>
</head>
<style>
    .center-vertical {
        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<body>
    <div class="center-vertical"></div>
</body>
</html>

2. margin: auto；绝对定位

我们经常使用margin: 0 auto;实现水平居中，而认为margin: auto不能实现垂直居中，实际上垂直居中的实现需要声明元素的高度和绝对定位配合实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin:auto实现绝对定位元素的居中</title>
</head>
<style>
    .center-vertical {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin: auto;
        position: absolute;
        top:0; right: 0; bottom: 0; left: 0;
    }
</style>
<body>
    <div class="center-vertical"></div>
</body>
</html>

3. css3.0弹性盒子布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局 水平垂直居中</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body{
        display: flex;
        justify-content: center;    /* 定义body的元素的水平居中 */
        align-items: center;    /* 定义body元素的垂直居中 */
    }
    .center-vertical {
        width: 100px;
        height: 100px;
        background-color: orange;
    }
</style>
<body>
    <div class="center-vertical"></div>
</body>
</html>

4. 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位实现</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .content{
        width: 100px;
        height: 100px;
        background-color: orange;
        margin: 0 auto;     /* 水平居中 */
        position: relative;
        top: 50%;   /* 偏移 */
        /* margin-top: -150px; */  /* 第一种：margin-top: 宽度的一半要计算 */
        transform: translateY(-50%);    /* 第二种：transformY(-50%) */
    }
</style>
<body>
    <div class="content"></div>
</body>
</html>

<style>
    html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .content{
        width: 100px;
        height: 100px;
        background-color: orange;
        position: relative;
        top: 50%;   /* 偏移 */
        left: 50%;
        /* margin-top: -150px; */  /* 第一种：margin-top: 宽度的一半要计算 */
        transform: translate(-50%,-50%);    /* 第二种：transformY(-50%) */
    }
</style>

5. vertical-align:middle

vertical-align:middle;垂直方向居中—> 解决图片问题

verical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

允许指定负长度值和百分比值。这会是元素降低而不是升高。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

<style>
    .big-box{
        width: 500px;
        height: 500px;
        background-color: green;
        text-align: center;     /* 水平居中 */
        line-height: 500px;     /* 等于高度 */
    }
</style>
<body>
    <div class="big-box">
        <span>是南栀呀~</span>
    </div>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-align:middle;</title>
</head>
<style>
    .big-box{
        width: 300px;
        height: 300px;
        background-color: green;
        text-align: center;     /* 水平居中 */
        line-height: 300px;     /* 等于高度 */
    }
    img{
        vertical-align: middle;
    }
</style>
<body>
    <div class="big-box">
        <span>
            是南栀呀~
            <img src="../image/易烊千玺1.jpg" width="100px" height="100px">
        </span>
    </div>
</body>
</html>

在这里插入图片描述

6. display:table实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: table; display: table-cell;</title>
</head>
<style>
    .parent{
        width: 300px;
        height: 300px;
        background-color: orange;
        display: table;
        text-align: center;
    }
    .son{
        display: table-cell;
        vertical-align: middle;
    }
</style>
<body>
    <div class="parent">
        <div class="son">是南栀呀1~</div>
        <div class="son">是南栀呀2~</div>
    </div>
</body>
</html>