浅谈前端布局中的对齐和居中

作者: 我小时候很可爱 | 来源:发表于2020-04-22 12:17 被阅读0次

写在前面

相信很多初学前端页面布局的小伙伴都会遇到一些在元素垂直和居中的问题。为什么已经写了元素垂直和居中的属性页面却看不到效果呢？相信大多数人包括我在初学阶段都会遇到的问题，就是因为对属性的认识比较模糊，今天就让我来简单的和大家一起分析交流总结一下，希望能给予大家帮助。首先我们需要了解以下三种元素。（由于效果图很多都一样，所以没有把每一张都放上来，请谅解）

块元素：所谓块元素就和一个盒子一样，有长宽 (默认为父级宽度的100%) 里面可以存放块级元素和行内元素。块级元素的特点就是：总是在新行上开始；高度，行高以及外边距和内边距都可控制。常见块元素(block element)：h1~h5、 div、ol、ul、table、p等等。

行内元素 (内联元素)：所谓行内元素就是一行可以放多个，高宽不可设置，行内元素只能容纳文本和其他行内元素，不可放块级元素。常见内联元素(inline element)：a、strong、b、em、i等等。

行内块元素：所谓行内块就是可以对它们设置行高、宽高、和对齐属性，不自动换行也就是一行可以放多个。由于行内块状元素综合了行内元素和块状元素的特性，所以在日常也用的较多。块元素、行内元素转行内块的方法：display：inlink-block。

元素水平居中对齐

text-align 属性规定元素中的文本的水平对齐方式。

Tip：
- 该种方式只对块级元素内所有的文字、行内元素、行内块元素有效，对块级元素是无法实现居中的
- 该种方法还有继承性，也就是说添加了该属性的块级元素它里面的块级元素的块级元素的行内元素也会居中

值	描述
left	把文本排列到左边。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

实现代码如下：

<head>
    <style>
    .big {
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="big">
        我要居中
    </div>
</body>

margin ：0 auto 用该种方法可实现对块级元素的居中对齐

Tip：
- 使用 margin :0 auto;的盒子，必须要有width。
- 只有标准流中的盒子，才能使用 margin :0 auto。
- 该种方式是相对于父级元素水平居中。比如，父级元素是body那么就是页面居中。

实现代码如下：

<head>
    <style>
    .big {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: skyblue;
        }
</style>
</head>

<body>
    <div class="big">
    </div>
</body>

利用绝对定位实现，该种方式实现的同样是对块级元素的水平居中。

Tip:
- 该种方法是相对于父元素偏移位置
- 记得在父元素上添加相对定位 position: relative “子绝父相”
- 需要减去自身宽度一半的偏移量

实现代码如下：

<head>
    <style>
    .big {
            position: relative;/* 记得添加相对定位 */
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            position: absolute;
            left: 50%;
            margin-left: -50px;/* 记得减去偏移量 */
            width: 100px;
            height: 100px;
            background-color: salmon;
        }
</style>
</head>

<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>

效果图如下：

利用css3方法实现块级元素居中

Tip：
- 和上一种方法类似，也需要添加相对定位和绝对定位来实现
- 该种方法可用于在盒子宽度会改变时的情况，比如在移动端布局时，可以不要靠宽度来计算偏移量

实现代码如下

<head>
    <style>
    .big {
            position: relative;/* 记得添加相对定位 */
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);/* 利用css3实现偏移 */
            width: 100px;
            height: 100px;
            background-color: salmon;
        }
</style>
</head>

<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>

利用Flex弹性布局实现水平居中。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。即display： flex。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

Tip：
- 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
- 由于这里我们要水平居中，而主轴默认的是x轴，所以不用再设置主轴方向，只需在容器上设置justify-content属性居中即可。
- 对块级元素，行内元素，行内块元素和文本都有效。

实现代码如下：

<head>
    <style>
        .big {
            display: flex;
            justify-content: center;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

效果图如下：

元素垂直居中对齐

line-height 属性设置行间的距离（行高）。

Tip：
- 不允许使用负值。
- 只适用于子元素为单行文本的情况！！！（重点）
- 对块级元素无效

行高和高度之间有以下关系

行高和高度位置

行高=高度垂直居中

行高>高度相对于居中位置偏下

行高<高度相对于居中位置偏上

行高和高度	位置
行高=高度	垂直居中
行高>高度	相对于居中位置偏下
行高<高度	相对于居中位置偏上

实现代码如下：

<head>
    <style>
        .big {
            display: flex;
            justify-content: center;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            width: 100px;
            height: 100px;
            line-height: 100px;/*让123在小盒子中垂直居中*/
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
            <span>123</span>
        </div>
    </div>
</body>

vertical-align 属性设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

该属性应该会是大多数初学前端小伙伴由于用得较少容易忽视和会觉得比较难的一个点，我争取在以后更新一篇专门讲该属性的文章。（转到该文章）在这里我们知道有这么个方法实现垂直对齐即可。

实现代码如下：

<head>
    <style>
    .big {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: table-cell;
            vertical-align: middle;
        }
        
        .small {
            width: 100px;
            height: 100px;
            line-height: 50px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

利用绝对定位实现，该种方式实现的同样是对块级元素的垂直居中。

Tip:
- 该种方法是相对于父元素偏移位置
- 记得在父元素上添加相对定位 position: relative “子绝父相”
- 需要减去自身高度一半的偏移量

实现代码如下：

<head>
    <style>
        .big {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            position: absolute;
            top: 50%;
            margin-top: -60px;
            width: 100px;
            height: 120px;
            background-color: yellowgreen;
        }      
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

效果图如下：

利用css3方法实现块级元素垂直居中

Tip：
- 和上一种方法类似，也需要添加相对定位和绝对定位来实现
- 该种方法可用于在盒子宽度会改变时的情况，比如在移动端布局时，可以不要靠宽度来计算偏移量

实现代码如下

<head>
    <style>
        .big {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

效果图如下：

利用Flex弹性布局实现垂直居中。

Tip：
- 对块级元素，行内元素，行内块元素和文本都有效果。
- 需要在该种方法设置主轴，由于默认是从左到右，所以要换成从上到下；即justify-content: center。
- 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

实现代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            display: flex;
            flex-direction: column;/* 切换主轴方向 */
            justify-content: center;/*垂直居中*/
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

利用margin属性实现

Tip：
- 需要添加相对定位和绝对定位来实现
- Top和bottom设置为0；margin： auto; 上下不偏移时才能让系统自动设置偏移量
- 对块级元素有效，对行内元素、行内块元素和文本无效
- 该种方法个人用得较少，但也是一种居中的方法

实现代码如下：

<head>
    <style>
        .big {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

效果图如下：

元素垂直水平居中对齐

利用line-height和text-align相结合的方法。

Tip：
- 该种方法只对行内元素、行内块元素和文本有效，对块级元素无效。
- 是较为常用的方法，需重点掌握
- 设置方法为：line-height: height值；和text-align: center 。

实现代码如下：

<head>
    <style>
        .big {
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="big">
        <span>123</span>
        <span>123</span>
    </div>
</body>

效果图如下：

利用Flex布局的方法。

Tip：
- 需要把元素的主轴居中侧轴居中即可；justify-content: center; align-items: center
- 不具备继承性，只能对它的子盒子起作用，无法继续往下起作用
- 对块元素，行内元素、行内块元素和文本元素均有效

实现代码如下：

<head>
    <style>
        .big {
            display: flex;
            justify-content: center;/*主轴居中*/
            align-items: center;/*侧轴居中*/
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        
        .small1 {
            width: 50px;
            height: 50px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
            <div class="small1"></div>/*对子盒子的子盒子无效*/
        </div>
    </div>
</body>

效果图如下：

利用margin方法。

Tip：
- 该方法只对块级元素有效
- 需要margin属性和偏移量相互配合实现
- 在这里我介绍该方法的两种方法。第一种通过把所有的偏移量设为0，并和margin结合的方法实现；第二种通过移动自身元素一半的偏移量实现
- 该方法不具备继承性

实现代码如下（第一种）：

<head>
    <style>
        .big {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .small {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }     
    </style>
</head>

<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

实现代码如下（第二种）：

<head>
    <style>
        .big {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

效果图如下：

利用css3的方法

Tip：

对块级元素有效
适用于子元素宽高不固定的情况下

实现代码如下：

<head>
    <style>
        .big {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .small {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

效果图如下：

总结

在前端布局过程中之所以会遇到一些居中效果出不来的情况可能是因为对页面布局的属性不熟悉，哪些只对块级元素有效，哪些只对行内元素有效，哪些对所有的元素都有效，哪些有继承性，这都需要我们去掌握，希望这篇文章能给各位小伙伴带来一些帮助！

浅谈前端布局中的对齐和居中

写在前面

元素水平居中对齐

元素垂直居中对齐

元素垂直水平居中对齐

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术