前端布局系列---居中布局的多种实现方式
布局是指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%);
}
②实现效果
③优缺点分析
缺点：也是修改了父级元素的样式，且浏览器兼容性不好
到这里，关于水平居中、垂直居中、水平垂直居中的布局方式就已经介绍完毕了，当然实现方式肯定不止这些了，欢迎留言其他的实现方式哦！如果您觉得对您有帮助的话，欢迎点赞与转发哦！
本文地址：https://blog.csdn.net/m0_37508531/article/details/107580745
上一篇： HTML5+CSS3基础知识汇总 (HTML5篇)
下一篇： 迎广“变形金刚”机箱高清图赏：逼格超赞