水平居中布局
inline-block(子)+text-align(父)
缺点:text-align具有继承性导致子集文本内容默认居中显示
#parent{
background-color: palevioletred;
width: 100%;
height: 300px;
text-align: center;
}
#child{
background-color: papayawhip;
display: inline-block;
width: 200px;
height: 100px;
}
body中结构:
网页效果展示:
table(子)+margin(子)
缺点:如果子集元素脱离文档流(float,absolute,fixed),导致margin无效
#parent{
background-color: palevioletred;
width: 100%;
height: 300px;
}
#child{
background-color: papayawhip;
margin: 0 auto;
display: table;/*转换成块级元素*/
}
body结构:
<body>
<!-- 水平居中布局 -->
<div id="parent">
<div id="child">
我是水平居中布局table+margin
</div>
</div>
</body>
效果:
relative(父开定位即可)+absolute(子)+transform(子) —>推荐
缺点:css3新增属性,浏览器支持性不好
#parent{
background-color: palevioletred;
position: relative;/*开定位即可fixed也行 */
width: 100%;
height: 300px;
}
#child{
background-color: papayawhip;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
body结构:
<body>
<!-- 水平居中布局 -->
<div id="parent">
<div id="child">
我是水平居中布局absolute+transform
</div>
</div>
</body>
效果展示:
垂直居中布局
table-cell(父)+vertical-aligh(父)
父:相当于单元格,子相当于其中的文本
缺点具有继承性
#parent{
background-color: palevioletred;
display:table-cell;
vertical-align: middle;
width: 100%;
height: 300px;
}
#child{
background-color: papayawhip;
}
body结构:
<body>
<!-- 垂直居中布局 -->
<div id="parent">
<div id="child">
我是垂直居中布局table-cell+vertical-aligh
</div>
</div>
</body>
效果展示:
relative(父)+absolute(子)+transform(子)
父加定位即可fixed也可
#parent{
background-color: palevioletred;
position: fixed;
width: 100%;
height: 300px;
}
#child{
background-color: papayawhip;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
body结构:
<body>
<!-- 垂直居中布局 -->
<div id="parent">
<div id="child">
我是垂直居中布局absolute+transform
</div>
</div>
</body>
多列布局
两列布局
float+margin
#left{
width: 200px;
height: 300px;
background-color:yellow;
float:left;
}
#right{
height: 300px;
background-color: purple;
margin-left: 200px;
}
body结构:
<body>
<!-- 两列布局 -->
<div id="left">两列布局左</div>
<div id="right">两列布局右</div>
</body>
效果展示:
float+overflow
overflow:hidden会开启BFC模式,当前元素的内部环境与外界完全隔离
#left{
width: 200px;
height: 300px;
background-color:yellow;
float:left;
}
#right{
height: 300px;
background-color: purple;
overflow:hidden;
}
display:table
#parent{
display: table;
width: 100%;
}
#left{
display: table-cell;
width: 200px;
height: 300px;
background-color:yellow;
}
#right{
height: 300px;
background-color: purple;
}
body结构:
<body>
<!-- 两列布局 -->
<div id="parent">
<div id="left">两列布局左</div>
<div id="right">两列布局右</div>
</div>
</body>
圣杯布局(定宽+自适应+定宽)
#left,#right{
width: 200px;
background-color: pink;
height: 300px;
}
#center{
height: 300px;
background-color: powderblue;
margin-left: 200px;
margin-right:200px;
}
#left{
float: left;
}
#right{
float:right;
}
body中的结构:
<body>
<!-- 圣杯布局 -->
<div id="left">左侧</div>
<div id="right">右侧</div>
<div id="center">中间</div>
</body>
效果展示:
圣杯布局center在上
为了对搜索引擎友好,要把最重要的center放在第一位加载,因此body结构应该如下:
<body>
<!-- 圣杯布局 -->
<div id="parent">
<div id="center">中间</div>
<div id="left">左侧</div>
<div id="right">右侧</div>
</div>
</body>
相应的css布局代码如下:
#parent{
margin-left:200px;
margin-right:200px;
}
#left{
background-color: yellow;
width: 200px;
height: 300px;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
#right{
background-color: palevioletred;
width: 200px;
height: 300px;
float: left;
margin-right: -200px;
}
#center{
background-color: powderblue;
height: 300px;
float: left;
width: 100%;
}
效果展示:
双飞翼布局
淘宝团队出品,上述圣杯布局较为复杂,双飞翼改善了定位
上述代码若去掉定位则出现如下效果,中间二字不见了:
因此为了改善需要加个子标签div#inner:
body结构:
<body>
<!-- 双飞翼布局:优化了圣杯布局中的定位 -->
<div id="parent">
<div id="center">
<div id="inner">中间</div>
</div>
<div id="left">左侧</div>
<div id="right">右侧</div>
</div>
</body>
css结构:
#parent{
height: 300px;
}
#left{
background-color: yellow;
width: 200px;
height: 300px;
margin-left: -100%;
float:left;
}
#right{
background-color: palevioletred;
width: 200px;
height: 300px;
margin-left: -200px;
float:left
}
#center{
background-color: powderblue;
height: 300px;
width:100%;
float: left;
}
#inner{/*增加了这部分 */
height: 300px;
background-color: pink;
margin-left: 200px;
margin-right: 200px;
}
效果如下:
等分布局
float+width:20%
.child1,.child2,.child3,.child4,.child5{
height: 200px;
width: 20%;
float: left;
}
<body>
<!-- 等分布局 -->
<div id="parent">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
<div class="child4">4</div>
<div class="child5">5</div>
</div>
</body>
display:table(父)+display:table-cell(子)
#parent{
display: table;
table-layout: fixed;
width: 100%;
height: 300px;
}
.child1,.child2,.child3,.child4,.child5{
display: table-cell;
width:20%;
}
<body>
<!-- 等分布局 -->
<div id="parent">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
<div class="child4">4</div>
<div class="child5">5</div>
</div>
</body>
效果:
css3(新增属性):columns
columns=column-count+column-width
#parent{
column-count: 5;
column-width:200px ;
column-gap: 0;
}
html结构同上
效果同上