常见布局
固定尺寸
布局可以从固定尺寸先了解，先构思好页面的主要结构，做动画的元素一般需要绝对定位，方便操作移动。
自适应布局
响应式的布局的结构其实就是多个固定尺寸的组合，元素的宽度，字体的大小一般会以半分比的形式设置。通过媒体查询进行不同分辨率下的布局。
布局方式
居中设置
在CSS布局中，水平居中与垂直居中一直是用到比较多的，在本篇中将介绍水平居中、垂直居中的几种方式。
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 200px;
height: 100px;
position: relative;
background-color: #374858;
}
.parent .child {
width: 100px;
height: 50px;
background-color: #9dc3e6;
}
1. 水平居中
子元素为内联样式
当子元素为内联样式时(display: inline-block | inline-flex | inline-grid | inline-table 也含有内联样式特性)，只需要设置父元素的text-align: center。
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
text-align: center;
}
.parent .child {
display: inline-block;
}
子元素为块级样式
父元素和子元素都是块级元素时，设置子元素的margin: 0 auto，子元素需要设置width。
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {}
.parent .child {
display: block;
margin: 0 auto;
}
子元素 position: absolute
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {}
.parent .child {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
父元素 display: flex
此时子元素可为内联、块级元素。
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: flex;
justify-content: center;
}
.child {
display: inline;
margin: 0 auto;
}
2. 垂直居中
同水平居中一样，这里也将分别介绍当子元素的样式为内联 、块级 以及绝对定位时 的垂直居中布局方案。
子元素为块级元素
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: table-cell;
vertical-align: middle;
}
.parent .child {
display: block;
}
子元素 position: absolute
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {}
.parent .child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
父元素 display: flex
此时子元素可为内联、块级元素。
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: flex;
align-items: center;
}
.parent .child {
display: inline;
}
3. 水平居中+垂直居中
子元素 display: inline-block
设置子元素的display: inline-block。此时的子元素需要设置width和height。
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.parent .child {
display: inline-block;
}
子元素 position: absolute
此时的子元素为绝对定位。
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
position: relative;
}
.parent .child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
父元素 display: flex
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.parent .child {}