一、单列布局
1、水平居中
1)使用text-align: center
和display: inline-block
<div class="parent">
<div class="child">Hello, world</div>
</div>
CSS:
.parent {
width: 300px;
text-align: center;
background: #888;
}
.child {
display: inline-block;
width: 200px;
height: 100px;
background: #36C;
text-align: left; /* 修正父容器带来的副作用 */
}
优点:兼容性好(完美兼容IE8+),可以不用指定宽度
缺点:需要同时设置子元素和父元素
2)使用margin: auto
利用CSS计算margin的特点,左右指定为auto
的时候能够水平居中
<div class="box"></div>
CSS:
.box {
width: 200px;
height: 100px;
margin: auto;
background: #36C;
}
优点:兼容性很好,实现方便
缺点:需要指定容器的宽度
3)使用display: table
<div class="box"></div>
CSS:
.box {
display: table;
margin: auto;
}
优点:可以兼容IE8+,且不需要指定宽度
缺点:IE6/7不兼容
4)使用定位和transform
<div class="parent">
<div class="child">Hello, world</div>
</div>
CSS:
.parent {
width: 300px;
background: #888;
}
.child {
position: relative; left: 50%;
width: 200px;
height: 100px;
transform: translateX(-50%);
background: #36C;
}
缺点:兼容性一般(transform仅支持IE9+)
5)使用flex
布局
<div class="parent">
<div class="child">Hello, world</div>
</div>
CSS:
.parent {
display: flex;
justify-content: center;
width: 300px;
background: #888;
}
.child {
height: 100px;
background: #36C;
}
优点:实现简单,且不需要知道子容器的宽度
缺点:兼容性不好(flex仅支持IE10+)
2、垂直居中
1)使用display: table-cell
<div class="parent">
<div class="child">Hello, world</div>
</div>
CSS:
.parent {
display: table-cell; /* 关键部分 */
vertical-align: middle; /* 关键部分 */
height: 300px;
background: #000;
}
.child {
width: 100px;
height: 200px;
background: #36C;
}
2)采用定位和transform
<div class="parent">
<div class="child">Hello, world</div>
</div>
CSS:
.parent {
height: 300px;
background: #888;
}
.child {
position: relative; top: 50%; /* 关键部分 */
transform: translateY(-50%); /* 关键部分 */
width: 100px;
height: 200px;
background: #36C;
}
3)使用flex
布局
<div class="parent">
<div class="child">Hello, world</div>
</div>
CSS:
.parent {
display: flex;
align-items: center;
height: 300px;
background: #888;
}
.child {
width: 100px;
height: 200px;
background: #36C;
}
3、水平垂直都居中
以下的示例基于HTML:
<div class="parent">
<div class="child"></div>
</div>
1)利用vertical-align: middle
、text-align: center
、display: inline-block
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 500px;
background: #F7F7F7;
}
.child {
display: inline-block;
text-align: left;
width: 200px;
height: 200px;
background: #36C;
}
2)结合定位和transform
.parent {
position: relative;
width: 500px;
height: 500px;
background: #F7F7F7;
}
.child {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: #36C;
}
3)使用flex
布局
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background: #F7F7F7;
}
.child {
width: 200px;
height: 200px;
background: #36C;
}
二、多列布局
1、左侧固定,右侧自适应
1)使用float
和margin
<div class="box">
<div class="left"></div>
<div class="right-fix">
<div class="right">Hello, world</div>
</div>
</div>
CSS:
.box { overflow: hidden }
.left {
float: left;
width: 200px;
height: 100px;
margin-right: -200px;
background: #888;
}
.right-fix {
float: right;
width: 100%;
}
.right {
margin-left: 200px;
height: 90px;
background: #36C;
}
2)使用display: table
实现
<div class="box">
<div class="left"></div>
<div class="right">Hello, world</div>
</div>
CSS:
.box {
display: table;
table-layout: fixed;
width: 100%;
}
.left {
display: table-cell;
width: 200px;
height: 100px;
background: #888;
}
.right {
display: table-cell;
height: 100px;
background: #36C;
}
3)使用定位实现
<div class="box">
<div class="left"></div>
<div class="right">Hello, world</div>
</div>
CSS:
.box {
position: relative;
}
.left {
position: absolute; left: 0; top: 0;
width: 200px;
height: 100px;
background: #888;
}
.right {
height: 100px;
margin-left: 200px;
background: #36C;
}
4)使用flex布局
<div class="box">
<div class="left"></div>
<div class="right">Hello, world</div>
</div>
CSS:
.box {
display: flex;
}
.left {
flex: 0 0 200px;
width: 200px;
height: 100px;
background: #888;
}
.right {
flex: 1;
height: 100px;
background: #36C;
}
2、右侧固定,左侧自适应
<div class="box">
<div class="left-fix">
<div class="left">Hello, world</div>
</div>
<div class="right"></div>
</div>
CSS:
.box { overflow: hidden; }
.left-fix {
float: left;
width: 100%;
height: 100px;
background: #777;
}
.left {
margin-right: 200px;
}
.right {
float: right;
width: 200px;
height: 100px;
margin-left: -200px;
background: #36C;
}
其他实现方式有display: table
、定位以及flex
,原理和左侧固定右侧自适应一致。
3、左侧和右侧定宽,中间自适应
<div class="box">
<div class="left"></div>
<div class="center-fix">
<div class="center">Hello, world</div>
</div>
<div class="right"></div>
</div>
CSS:
.box { overflow: hidden; }
.left {
float: left;
width: 100px;
height: 100px;
margin-right: -100px;
background: #888;
}
.center-fix {
float: left;
width: 100%;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 100px;
background: #36C;
}
.right {
float: left;
width: 100px;
height: 100px;
margin-left: -100px;
background: #888;
}
4、左侧、中侧定宽,右侧自适应
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right-fix"></div>
<div class="right">Hello, world</div>
</div>
</div>
CSS部分:
.box { overflow: hidden; }
.left {
float: left;
width: 100px;
height: 100px;
background: #888;
}
.center {
float: left;
width: 100px;
height: 100px;
margin-right: -200px;
background: #36C;
}
.right-fix {
float: left;
width: 100%;
}
.right {
height: 100px;
margin-left: 200px;
background: #F60;
}
5、总结
对于这种有一列自适应,而其他列固定的布局,是有套路的。使用float
+margin
实现的一般方式为:
1)在书写HTML的时候,对于需要自适应的那一列,应该包裹一层<div class="fix"></div>
层,这样子可以使得修复IE6下显示的BUG
2)对于固定的列,都使用float: left
来向左居中,而自适应的那一列,本身不写float: left
,fix层才需要写float: left
3)计算自适应列距离最左边界
的宽度A,距离最右边界
的宽度B。fix层设置:width: 100%; float: left; margin-left: -Apx; margin-right: -Bpx
4)fix层中包裹的列,设置:margin-left: Apx; margin-right: Bpx
5)父容器做清除浮动处理,可以用overflow: hidden