布局是指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>

效果如下图所示：

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;  /* 更改标签模式 */
}

②实现效果

③优缺点分析

优点：浏览器兼容性好；
缺点：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;   /* 根据浏览器自动分配 等分 */
}

②实现效果

③优缺点分析

优点：只需要对子级元素进行设置
缺点：如果子级元素脱离文档流（浮动、绝对定位、固定定位），导致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%);
}

②实现效果

③优缺点分析

优点：父级元素是否脱离文档流，不影响子级元素水平居中
缺点：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;
}

②实现效果

③优缺点分析

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

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; /* 子绝父相 */top: 50%;transform: translateY(-50%);
}

②实现效果

③优缺点分析

优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果
缺点：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);
}

②实现效果

③优缺点分析

优点：浏览器兼容性好
缺点：①目的是为了让子元素垂直居中，但是还动了父元素的样式；②如果子元素设置了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%);
}

②实现效果

③优缺点分析

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

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

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

CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
前端学习（497）：布局之居中布局
css怎么把横向菜单变纵向_CSS 布局模式 + 居中布局
CSS 布局模式,有时简称为布局,是一种基于HTML元素盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法. 正常流(Normal flow) 也被称为文档流指在不对页面进行任何布局控制时 ...
按钮自动居中布局_CSS布局技巧
css实现左右布局和居中布局显示是前端进行页面设计的基础,也是全面了解并学习css一个很好的切入点,因为其中会涉及到对许多css基础点的认知.实现css入门,理解左右布局的实现方式是必经之路,同时也能 ...
8种css居中实现的详细实现方式了
这是一篇关于居中对齐方式的总结开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说.今天就来总结一下这些居中的方式使用flex布局设置居中. 使用f ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
前端小白移动端布局总结（含四大实战项目）及笔记
前言眼看着做两顿凉皮的功夫,2020第一季度就要过完了. 过去的三个月,好像经历了很多,又好像什么都没留下. 这种茫然的背后,是我们特殊时期害怕被淘汰的一种自我审视.看到百度数据显示,疫情期间日均超 ...
【前端设计】前端设计原则，布局规范
内容总结于 elementUI,iview,bootStrap中文网,互联网前端设计原则一致性 Consistency 与现实生活一致:与现实生活的流程.逻辑保持一致,遵循用户习惯的语言和概念: ...
html实现上下层效果图,Css布局系列-上下两栏应用场景_html/css_WEB-ITnose
今天讲讲上下两栏布局的应用场景,在此之前稍微提一下box-sizing这个属性.该属性有三个值分别为content-box|border-box|inherit. box-sizing 属性允许您以特 ...

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

0.搭建基本格式代码

1.水平居中布局

1）inline-block + text-align

2）table + margin

3）absolute + transform

2.垂直居中布局

1）table-cell + vertical-align

2）absolute + transform

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

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

2）absolute + transform

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

最新文章

热门文章