前端布局系列---居中布局的多种实现方式

淩亂°似流年 2023-03-01 12:35 24阅读 0赞

布局是指HTML的整体结构，好的布局直接影响到用户的体验，同样，在前端面试的过程中，布局也是一个必问点，所以，在这里小编进行了统一整理，形成一个布局系列博客，主要包含以下布局方式：

①居中布局（水平居中布局、垂直居中布局、水平+垂直居中布局）  
②多列布局（两列布局、三列布局、圣杯布局+双飞翼布局、等分布局、等高布局、css多列布局）

欢迎其他伙伴进行补充！

--------------------

# 0.搭建基本格式代码 #

一个父盒子套一个子盒子，代码如下：

<html lang="en">
      <head>
        <style> #parent { width: 300px; height: 300px; background-color: pink; } #child { width: 150px; height: 150px; background-color: rgb(161, 235, 210); } </style>
      </head>
      <body>
        <div id="parent">
          <div id="child">我是孩子</div>
        </div>
      </body>
    </html>

效果如下图所示：  
![在这里插入图片描述][20200725165543922.png]

# 1.水平居中布局 #

简单解释一下：水平居中布局即当前元素在父级元素中水平居中。主要实现方式：

1.inline-block + text-align
    2.table + margin
    3.absolute + transform

## 1）inline-block + text-align ##

①实现方式

#parent { 
      width: 300px;
      height: 300px;
      background-color: pink;
      text-align: center;   /* 为文本内容设置对齐方式 */
    }
    #child { 
      width: 150px;
      height: 150px;
      background-color: purple;
      display: inline-block;  /* 更改标签模式 */
    }

②实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

③优缺点分析

优点：浏览器兼容性好；  
缺点：`text-align`具有继承性，子级元素内容也会居中，如果想让子级元素左对齐，需重新设置`text-align:left`。

## 2）table + margin ##

①实现方式

#child { 
      width: 150px;
      height: 150px;
      background-color: rgb(161, 235, 210);
      display: table;   /* 或者 display: block; */
      margin: 0 auto;   /* 根据浏览器自动分配 等分 */
    }

②实现效果  
![在这里插入图片描述][20200725170102653.png]  
③优缺点分析

优点：只需要对子级元素进行设置  
缺点：如果子级元素脱离文档流（浮动、绝对定位、固定定位），导致margin属性的值无效

## 3）absolute + transform ##

①实现方式

#parent { 
      position: relative; /* 只需开启定位即可 relative absolute fixed */
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #child { 
      width: 150px;
      height: 150px;
      background-color: rgb(161, 235, 210);
      position: absolute; /* 子绝父相 */
      left: 50%;
      transform: translateX(-50%);
    }

②实现效果  
![在这里插入图片描述][20200725170841784.png]

③优缺点分析

优点：父级元素是否脱离文档流，不影响子级元素水平居中  
缺点：`transform`是`CSS3`新增的，有浏览器兼容的问题

# 2.垂直居中布局 #

简单解释一下：垂直居中布局即当前元素在父级元素中垂直居中。主要实现方式：

1.table-cell + vertical-align
    2.absolute + transform

## 1）table-cell + vertical-align ##

①实现方式

#parent { 
      display: table-cell;   /* 设置当前元素为单元格td元素 */
      vertical-align: middle;  /* 文本内容的垂直方向对齐方式 */
      width: 300px;
      height: 300px;
      background-color: pink;
    }

②实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]  
③优缺点分析

优点：浏览器兼容性好  
缺点：`vertical-align`具有继承性，导致父级元素的文本也是居中显示的

## 2）absolute + transform ##

①实现方式

②实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]

③优缺点分析

优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果  
缺点：`transform`是`CSS3`新增的，有浏览器兼容的问题

# 3.水平居中 + 垂直居中布局 #

简单解释一下：水平居中布局和垂直居中布局的组合，即当前元素在父级元素中水平垂直居中。主要实现方式：

1.table + margin + table-cell + vertical-align
    2.absolute + transform

## 1）table + margin + table-cell + vertical-align ##

①实现方式

#parent { 
      display: table-cell; /* 设置当前元素为单元格td元素 */
      vertical-align: middle; /* 文本内容的垂直方向对齐方式 */
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #child { 
      display: table; /* 或者 display: block; */
      margin: 0 auto; /* 根据浏览器自动分配 等分 */
      width: 150px;
      height: 150px;
      background-color: rgb(161, 235, 210);
    }

②实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]

③优缺点分析

优点：浏览器兼容性好  
缺点：①目的是为了让子元素垂直居中，但是还动了父元素的样式；②如果子元素设置了`display: table;`的话，父元素是`display: table-cell;`不符合标签语义化

## 2）absolute + transform ##

①实现方式

#parent { 
      position: relative;   /* 只需开启定位即可 relative absolute fixed */
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #child { 
      width: 150px;
      height: 150px;
      background-color: rgb(161, 235, 210);
      position: absolute;   /* 子绝父相 */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

②实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]

③优缺点分析

缺点：也是修改了父级元素的样式，且浏览器兼容性不好

--------------------

到这里，关于水平居中、垂直居中、水平垂直居中的布局方式就已经介绍完毕了，当然实现方式肯定不止这些了，欢迎留言其他的实现方式哦！如果您觉得对您有帮助的话，欢迎点赞与转发哦！

[20200725165543922.png]: /images/20230208/36a58382b95d4ce4b889b70f7237e64d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20230208/1ce112f524444a4d8208b00be7e1a430.png
[20200725170102653.png]: /images/20230208/ad17310a65d54f42956324fdb3008d86.png
[20200725170841784.png]: /images/20230208/975ee13ca1854de1a380e8890f607cce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20230208/d8fa410edfc84f91bfae732b8456049d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]: /images/20230208/04edec81f80c4274a469d7fe5ea40c35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 3]: /images/20230208/ad8022f34a4543a6900ae7bbfe84cec7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 4]: /images/20230208/12bd9662c4cc45f39ec2db24e4ddd8e6.png