对齐方式总结

搬砖搬到互联网

已于 2023-07-19 15:35:43 修改

阅读量82

点赞数 1

文章标签： html 前端 html5 css

于 2023-07-19 15:34:22 首次发布

本文链接：https://blog.csdn.net/m0_64204485/article/details/131810173

版权

本文详细介绍了CSS中实现元素居中的各种方法，包括使用text-align、margin、display:flex、line-height、定位以及transform属性。特别讨论了水平居中、垂直居中以及水平垂直居中的组合策略，如弹性盒子布局和Grid布局的应用。这些技巧对于创建响应式和中心对齐的网页设计至关重要。

摘要由CSDN通过智能技术生成

文章目录

CSS实现居中的几种方式

CSS实现居中的几种方式

当在CSS中实现居中布局时，有几种常见的方式可以使用：

1.水平居中：

使用text-align: center;将内容水平居中对齐。适用于行内元素或块级元素的父容器。
使用margin: 0 auto;将块级元素的左右边距设置为自动，使其在父容器内水平居中对齐。
使用Flexbox布局，将父容器的justify-content设置为center，可以将子元素水平居中对齐。

2.垂直居中：

2.1 line-height属性(重点)

使用line-height属性将行高设置为与父容器高度相等，使文本内容垂直居中对齐。适用于单行文本。

代码:

.container {
            width: 500px;
            height: 300px;
            background-color: orange;
            line-height: 300px;
        }

效果图：

在这里插入图片描述

2.2弹性盒

使用display:flex;可以直接在父元素上设置align-items: center;也可以在子元素上设置align-self: center;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 500px;
            height: 300px;
            background-color: orange;
            display: flex;
            /* align-items: center; */
        }
        .box{
            width: 300px;
            height: 100px;
            background-color: brown;
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            .box
        </div>
    </div>
</body>
</html>

效果：

在这里插入图片描述

3.水平垂直居中：

3.1定位结合margin

使用定位，给父元素设置（position: relative;）给子元素设置（position: absolute;），使用inset属性将子元素的左、上、右、下位置设为0，并使用margin:auto;将其挤到盒子中心。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 500px;
            height: 300px;
            background-color: orange;
            position: relative;
            text-align: center;
        }
        .box{
            width: 300px;
            height: 100px;
            background-color: brown;
            position: absolute;
            /* 相当于top:0; left:0; right:0 bottom:0; */
            inset: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        .container
        <div class="box">
            .box
        </div>
    </div>
</body>
</html>

效果图：

在这里插入图片描述

3.2定位结合transform

使用定位，给父元素设置（position: relative;）给子元素设置（position: absolute;）和transform属性实现居中。将子元素的左、上、右、下位置设为0，并使用transform的translate方法将元素向自身的中心平移。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: orange;
            position: relative;
            text-align: center;
        }
        .box {
            width: 300px;
            height: 100px;
            background-color: brown;
            position: absolute;
            /* 元素的左上角在中心位置 */
            top: 50%;
            left: 50%;
            /* 表示将元素在水平和垂直方向上分别向左和向上移动50%的自身尺寸。 */
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="container">
        .container
        <div class="box">
            .box
        </div>
    </div>
</body>

</html>

效果图：

在这里插入图片描述

3.3弹性盒子

使用Flexbox布局，将父容器的justify-content和align-items都设置为center，将子元素水平垂直居中对齐。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: orange;
            display: flex;
            /* 垂直方向 */
            align-items: center;
            /* 水平方向 */
            justify-content: center;
        }
        .box {
            width: 300px;
            height: 100px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>

</html>

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hmduxesl-1689751830484)(C:\Users\15997\AppData\Roaming\Typora\typora-user-images\image-20230719142330686.png)]

3.4Gird网格布局

使用Grid布局，将父容器的justify-items和align-items都设置为center，将子元素水平垂直居中对齐。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: orange;
            display: grid;
            place-items: center;
            /* 
            这种写法相当于是：
            justify-items: center;
            align-items: center;
            */
        }
        .box {
            width: 300px;
            height: 100px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>

</html>

效果图：

在这里插入图片描述

3.5Margin结合网格布局或者结合弹性盒

给父元素设置display: grid; 或者 display: flex;

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: orange;
            display: grid;
            /* 或者 display: flex;  */
        }
        .box {
            width: 300px;
            height: 100px;
            background-color: brown;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>

</html>