布局--居中布局

老王前端故事线
74 阅读3分钟

在前端中，布局一直是绕不开的一个话题。从很早以前的table布局，一直到现在的flex布局、grid布局等。都在一直演化发展。现在市面上存在的布局样式有： 居中布局、两列、三列布局、等分布局、等高布局、全屏布局等。这篇文章，先分析居中布局。居中布局分为： 水平居中布局、垂直居中布局、水平垂直居中布局三类。以下是能想到的实现方式：

水平居中布局

含义： 当前元素在父级元素容器中，水平方向是居中显示的。

1. 文本/行内元素/行内块元素

  • 使用 text-align 控制行内元素对齐

    ![1](C:\Users\fview\Desktop\wjStudy\CSS内容\布局\images\1.png)<div class="parent">
    <div class="child">这是一段文本textAlign</div>
</div>
​
<style>
    .parent {
        width: 300px;
        background-color: darkgray;
​
        text-align: center;
    }
    .child {
        background-color: red;
    }
</style>

  • 简单快捷，容易理解。但是存在问题：

    • 只对行内内容有效；
    • 属性具有继承性，会影响后代内容
    • 如果子元素的宽度 大于 父元素的宽度，则无效

1.png

2. 单个块级元素：

  • 使用 margin: 0 auto 在margin有节余的同时，如果左右的margin设置为 auto； 则会均分剩余空间。如果上下设置为 margin： auto，那么计算的值为 0

    <div class="parent">
    <div class="child">单个块元素</div>
</div>
​
<style>
    .parent {
        width: 300px;
        height: 400px;
        background-color: darkgray;
​
    }
    .child {
        width: 100px;
        background-color: red;
        margin: 0 auto;
    }
</style>

  • 兼容性好，但是：

    • 必须 定宽，且值不能为 auto；
    • 宽度要小于父元素

  • 2

2.png

3. 多个块元素

  • text-align 只控制行内内容

    <div class="parent">
    <div class="child">多个块元素</div>
    <div class="child">多个块元素</div>
</div>
​
<style>
    .parent {
        width: 300px;
        height: 400px;
        background-color: darkgray;
​
        text-align: center;
    }
    .child {
        background-color: red;
​
        display: inline-block;
    }
</style>

  • 缺点：

    • 只对行内内容有效；
    • 属性存在继承性，会影响后代内容
    • 块级元素改为 inline-block，会存在空格间距。需要给父级元素添加 font-size: 0,子元素单独设置 字体大小

3.png

4. 绝对定位

  • 父相子绝，然后根据 margin / transform 来处理

    <div class="parent">
    <div class="child">子元素绝对定位</div>
</div>
​
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

  • 缺点：

    • 脱离文档流
    • 使用margin的时候，需要知道子元素的宽度
    • transform，兼容到 IE9+

4.png

5. flex

  • flex布局，水平方向： justify-content: center

    <div class="parent">
    <div class="child">flex</div>
</div>
​
<style>
    .parent {
        display: flex;
        justify-content: center;
    }
</style>

5.png

垂直居中布局

含义： 当前元素在父级元素容器中，垂直方向是居中显示的。

1. 单行，行内元素

  • line-height

    <style>
    .parent {
        width: 100px;
        height: 200px;
        background-color: darkgray;
​
        line-height: 200px;
    }
    .child {
        background-color: red;
    }
</style>
​
<div class="parent">
    <div class="child">单行</div>
</div>

  • 只能处理单行行内内容，并且需要知道高度

6.png

2. 图片垂直居中

  • vertical-align 配合 line-height

    <style>
    .parent {
        width: 100px;
        height: 200px;
        background-color: darkgray;
​
        line-height: 200px;            
        font-size: 0;
    }
    .child {
        width: 50px;
        height: 50px;
        vertical-align: middle;
    }
</style>
<div class="parent">
    <img src="./images/examine.png" class="child" alt="">
</div>

  • 需要添加 font-size: 0 才能完全垂直居中

7.png

3. 单个块级元素

  • 使用 display: table-cell 相当于 table中的td

    <style>
    .parent {
        display: table-cell;
        vertical-align: middle;
    }
</style>
​
<div class="parent">
    <div class="child">table-cell</div>
</div>

  • 缺点：

    • 设置 table-cell 宽度和高度的值设置百分比无效
    • table-cell 不感知 margin；
    • 内容溢出时候，会自动撑开父级元素

8.png

4. 绝对定位

  • 子绝父相

    <style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<div class="parent">
    <div class="child">子绝父相</div>
</div>

9.png

5. flex

  • align-items: center;

    <style>
    .parent {
        display: flex;
        align-items: center;
    }
</style>
​
<div class="parent">
    <div class="child">flex</div>
</div>

10.png

水平垂直居中

1. table-cell+margin

.parent {
    display: table-cell;
    vertical-align: middle;
}
.child {
    margin: 0 auto;
}
​
<div class="parent">
    <div class="child">table-cell</div>
</div>
​

  • 缺点：

    • vertical-align 存在继承性，会导致 父级元素的文本 也 垂直居中显示

11.png

2. position 子绝父相

2.1 已知宽高 使用margin
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
<div class="parent">
    <div class="child">position--margin</div>
</div>
  • 此情况，必须知道宽高，才能使用margin进行反向移动
2.2 未知宽高，使用 transform
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="parent">
    <div class="child">position--transfrom</div>
</div>
2.3 margin： auto
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<div class="parent">
    <div class="child">position--四角为0</div>
</div>

12.png

3. flex

<style>
    .parent {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div class="parent">
    <div class="child">flex布局</div>
</div>

15.png

  • 创作不易，转发辛苦备注地址。感谢
avatar
文章
阅读
粉丝