水平居中布局
body{
<div id=”parent”>
<div id=”child”>水平居中布局<div>
<div>
}
1、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;
}
2、table(子)+margin(子)
缺点:如果子集元素脱离文档流(float,absolute,fixed),导致margin无效
#parent{
background-color: palevioletred;
width: 100%;
height: 300px;
}
#child{
background-color: papayawhip;
margin: 0 auto;
display: table;/*转换成块级元素*/
}
3、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%);
}
垂直居中布局
1、table-cell(父)+vertical-aligh(父)
父:相当于单元格,子相当于其中的文本
缺点具有继承性
#parent{
background-color: palevioletred;
display:table-cell;//单行,多行的文本垂直居中
vertical-align: middle;//把此元素放置在父元素的中部
width: 100%;
height: 300px;
}
#child{
background-color: papayawhip;
}
2、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>
<!-- 两列布局 -->
<div id="left">两列布局左</div>
<div id="right">两列布局右</div>
</body>
1.float+margin
#left{
width: 200px;
height: 300px;
background-color:yellow;
float:left;
}
#right{
height: 300px;
background-color: purple;
margin-left: 200px;
}
2.float+overflow
overflow:hidden会开启BFC模式,当前元素的内部环境与外界完全隔离
#left{
width: 200px;
height: 300px;
background-color:yellow;
float:left;
}
#right{
h