水平居中
1、第一种方案：
父元素设置：text-align: center;
子元素设置：display: inline-block;
优点：浏览器兼容性比较好
缺点：text-align属性具有继承性，导致子级元素的文本也是居中显示的,解决方案在子级元素中增加text-align:lfet;
<div class="parent">
<div class="child">子级元素</div>
</div>
.parent {
width: 100%;
height: 300px;
background: #ccc;
/**
center 居中
left 居左
right 居右
*/
text-align: center;
}
.child {
width: 300px;
height: 300px;
background: rgb(202, 50, 50);
/**
display: block; 块级元素
display: inline; 内联元素
display: inline-block; 行内块级元素
*/
display: inline-block;
text-align: left;
}
2、第二种方案：
优点：只需要设置子级元素进行设置就可以实现水平居中布局的效果
缺点：如果子级元素脱离文档流，导致margin属性的值是无效的（将元素设置为浮动float、绝对定位absolute或者固定定位fixed就会脱离文档流）
<div class="parent">
<div class="child">子级元素</div>
</div>
.parent {
width: 100%;
height: 300px;
background: #ccc;
}
.child {
width: 300px;
height: 300px;
background: red;
/**display: ;
table 和 block 都可以实现水平居中效果
*/
display: table;
/** margin 属性：外边距
一个值：上右下左
二个值：上下，左右
auto: 表示浏览器自动分配
三个值：上，左右，下
四个值：上右下左
*/
margin: 0 auto;
}
3、第三种解决方案
优点：无论父级元素是否脱离文档流，都不影响子级元素水平居中效果
缺点：transform属性是css3中新增的属性，浏览器支持情况不好
.parent {
width: 100%;
height: 300px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
/**
把当前元素设置为绝对定位之后：
- 父级元素没有开启定位，当前元素是相对于页面定位的
- 父级元素开启定位，当前元素是相对于父级元素的
*/
position: absolute;
left: 50%;
transform: translateX(-50%);
}
垂直居中
1、第一种：table-cell
.parent {
width: 300px;
height: 600px;
background: #ccc;
/**
display属性：
table: 设置当前元素为<table>元素
table-cell: 设置当前元素为<td></td>元素（单元格）
*/
display: table-cell;
/**
vertical-aligin属性：用于设置文本内容的垂直方向对齐方式
top: 顶部对齐
middle: 居中对齐
bottom: 底部对齐
*/
vertical-align: middle;
}
.child {
width: 300px;
height: 300px;
background: red;
}
2、第二种：position + transform
.parent {
width: 300px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3、第三种：行内块级元素
.parent {
width: 300px;
height: 600px;
background: #ccc;
}
.child {
width: 300px;
height: 300px;
background: red;
}
.parent::after {
content: ' ';
height: 100%;
}
.parent::after, .child {
display: inline-block;
vertical-align: middle;
}
4、第四种：flex
优点：内容块的宽度任意，可用于更复杂高级的布局技术
缺点：IE8/IE9不支持
.parent {
width: 300px;
height: 600px;
background: #ccc;
display: flex;
align-items: center;
}
.child {
width: 300px;
height: 300px;
background: red;
}
5、第五种：postion + margin-top负高度的一半
.parent {
width: 300px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 50%;
margin-top: -150px; // 负的高度的一半
}
6、第六种：绝对定位 + left、right、bottom、top+margin
.parent {
width: 300px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
7、第七种：display:grid
.parent {
width: 300px;
height: 600px;
background: #ccc;
display: grid;
}
.child {
width: 300px;
height: 300px;
background: red;
margin: auto;
}
居中部局
1、table+margin 实现水平方向的居中，table-cell + vertical-aligin实现垂直方向居中
.parent {
width: 600px;
height: 600px;
background: #ccc;
display: table-cell;
vertical-align: middle;
}
.child {
width: 300px;
height: 300px;
background: red;
margin: auto;
display: block;
margin: 0 auto;
}
2、absolute + transform
.parent {
width: 600px;
height: 600px;
background: #ccc;
position: relative;
}
.child {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
3、display:grid + margin:auto
.parent {
width: 600px;
height: 600px;
background: #ccc;
display: grid;
}
.child {
width: 300px;
height: 300px;
background: red;
margin: auto;
}
4、flex
.parent {
width: 600px;
height: 600px;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 300px;
height: 300px;
background: red;
}
圣杯布局
- 圣杯布局是来源于该布局效果类似圣杯而得名，简单来说，就是指三行三列布局。
- 主要是实现中间主体部分中的左右定宽+中间自适应的布局效果。
<div class="parent">
<div class="center">1</div>
<div class="left">2</div>
<div class="right">3</div>
</div>
.parent{
height: 300px;
margin-left: 300px;
margin-right: 300px;
}
.left,
.center,
.right{
height: 300px;
float: left;
}
.left,
.right{
width: 300px;
}
.left{
margin-left: -100%;
position: relative;
left: -300px;
background: chocolate;
}
.center{
background: darkcyan;
width: 100%;
}
.right {
background: darkred;
margin-left: -300px;
position: relative;
right: -300px;
}
双飞翼布局
- 针对圣杯布局的优化解决方案，主要优化了圣杯布局中开启定位的问题
<div class="parent">
<div class="center">
<div class="inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
.parent{
height: 300px;
}
.left,
.center,
.right{
height: 300px;
float: left;
}
.left,
.right{
width: 300px;
}
.left{
margin-left: -100%;
background: chocolate;
}
.center{
background: darkcyan;
width: 100%;
}
.right {
background: darkred;
margin-left: -300px;
}
.inner{
height: 300px;
margin: 0 300px;
}
等分布局
<div id="parent-box">
<div id="parent">
<div class="col1"><div class="inner"></div></div>
<div class="col2"><div class="inner"></div></div>
<div class="col3"><div class="inner"></div></div>
<div class="col4"><div class="inner"></div></div>
</div>
</div>
方案一：
#parent-box {
overflow: hidden;
}
#parent {
height: 300px;
margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
width: 25%;
height: 300px;
float: left;
padding-left: 10px;
box-sizing: border-box; /** 盒子模型为border-box */
}
.inner {
height: 300px;
}
.col1 .inner {
background: darkred;
}
.col2 .inner {
background: darksalmon;
}
.col3 .inner {
background: darkslateblue;
}
.col4 .inner {
background: darkviolet;
}
方案二：
#parent-box {
overflow: hidden;
}
#parent {
width: 1400px;
display: table;
margin-left: -10px;
}
.col1,.col2,.col3,.col4 {
height: 300px;
display: table-cell;
box-sizing: border-box;
padding-left: 10px;
}
.inner {
height: 300px;
}
.col1 .inner {
background: darkred;
}
.col2 .inner {
background: darksalmon;
}
.col3 .inner {
background: darkslateblue;
}
.col4 .inner {
background: darkviolet;
}
等高布局
第一种
#parent-box {
display: table;
}
.left,.right {
width: 300px;
display: table-cell;
}
.left {
background: #ccc;
}
.right {
background:#909090;
}
第二种
#parent-box {
overflow: hidden;
}
.left,.right {
width: 300px;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
background: #ccc;
}
.right {
background:#909090;
}
css3多列布局
columns
#parent {
/* column-count: 4;
column-width: 300px; */
columns: 4 300px;
column-gap: 1.2rem; // 默认为1rem，用于设置列与列之间的间距，该属性需要为多列显示时的元素设置
column-rule: 2px blue solid; // 用于定义列与列之间的边框，其中包括边框宽度、颜色、样式
}
.col1,.col2,.col3,.col4 {
height: 300px;
}
.col1 {
background: darkred;
}
.col2 {
background: darksalmon;
}
.col3 {
background: darkslateblue;
}
.col4 {
background: darkviolet;
}
