- 左右布局
- 左中右布局
- 水平居中
- 垂直居中
左右布局
利用float实现左右布局
- 给所有子元素加 float: left
- 给父元素加 clearfix 类，清除浮动
html代码
<div class="wrap clearfix">
<div class="left-box">
左边
</div>
<div class="right-box">
右边
</div>
</div>
css代码
body{
margin: 0;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.wrap{
width: 1000px;
margin: 50px auto 0;
}
.left-box{
float: left;
background: #ff9e2c;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.right-box{
float: left;
background: #b6701e;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
实现左右布局的效果
左右布局.png
使用绝对定位实现
- 给父级绝对定位
- 给子元素相对定位，相对于父元素定位
html代码同上
css代码
body{
margin: 0;
}
.wrap{
position: relative;
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
position: absolute;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.left-box{
top: 0;
left: 0;
background: #ff9e2c;
}
.right-box{
top: 0;
right:0;
background: #b6701e;
}
使用假的表格
- 将父容器转换为表，给父容器设置
display: table - 通过这个
display: table-cell，将子容器转换为表中的单元格
html代码同上
css代码
body{
margin: 0;
}
.wrap{
display: table;
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
display: table-cell;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.left-box{
background: #ff9e2c;
}
.right-box{
background: #b6701e;
}
使用Inline-block
- 给父元素中的子元素添加
display: inline-block; - 需要将两个div靠在一起，具体请看下面的代码，因为如果不靠在一起的话，会产生一个空格间隔，导致布局发生改变
html代码
<div class="wrap clearfix">
<div class="left-box">
左边
</div><div class="right-box">
右边
</div>
</div>
css代码
body{
margin: 0;
}
.wrap{
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
display: inline-block;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.left-box{
background: #ff9e2c;
}
.right-box{
background: #b6701e;
}
使用Flexbox
Flexbox是一种非常棒的方式，只需注意它仅限于IE 10及以上版本，您可能需要使用前缀和值来获得最佳支持
- 将父容器转换为一个灵活的盒子
- 子容器占用相同的空间份额。无需设置宽度或高度
- 为了确保它们是正确的，设置flex: 1;在两侧是一个很好的计划。
css代码
body{
margin: 0;
}
.wrap{
display: flex;
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
flex: 1;
font-size: 30px;
width: 50%;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.left-box{
background: #ff9e2c;
}
.right-box{
background: #b6701e;
}
使用网格布局
定义一个容器，然后将其拆分成可以用子元素灵活填充的列和单元格
css代码
body{
margin: 0;
}
.wrap{
display: grid;
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
font-size: 30px;
text-align: center;
height: 300px;
color: #fff;
line-height: 300px;
}
.left-box{
grid-column: 1;
background: #ff9e2c;
}
.right-box{
grid-column: 2;
background: #b6701e;
}
左中右布局
上面实现左右布局的方法都可以实现左中右布局，这里就挑3个比较实用的方法
利用float
原理同上，使用float实现左右布局
html代码
<div class="wrap clearfix">
<div class="left-box">左边</div>
<div class="middle-box">中间</div>
<div class="right-box">右边</div>
</div>
css代码
body{
margin: 0;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.wrap{
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
float: left;
height: 300px;
font-size: 30px;
text-align: center;
color: #fff;
line-height: 300px;
}
.left-box{
width: 30%;
background: #ff9e2c;
}
.middle-box{
width: 36%;
background: orange;
margin: 0 2%;
}
.right-box{
width: 30%;
background: #b6701e;
}
实现的效果
左中右布局.png
使用Flexbox
html代码同上
css代码
body{
margin: 0;
}
.wrap{
display: flex;
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
height: 300px;
font-size: 30px;
text-align: center;
color: #fff;
line-height: 300px;
}
.left-box{
width: 30%;
background: #ff9e2c;
}
.middle-box{
width: 36%;
background: orange;
margin: 0 2%;
}
.right-box{
width: 30%;
background: #b6701e;
}
使用网格布局
css代码
body{
margin: 0;
}
.wrap{
display: grid;
width: 1000px;
margin: 50px auto 0;
}
.wrap div{
height: 300px;
font-size: 30px;
text-align: center;
color: #fff;
line-height: 300px;
}
.left-box{
grid-column: 1;
background: #ff9e2c;
}
.middle-box{
grid-column: 2;
background: orange;
margin: 0 15px;
}
.right-box{
grid-column: 3;
background: #b6701e;
}
水平居中
内联元素水平居中
在块级父元素内水平居中内联元素
.center-children {
text-align: center;
}
块级元素水平居中
.center-me {
margin: 0 auto;
}
多个块级元素水平居中
使用inline-block
给元素设置display: inline-block;,设置父级元素的属性width: 100%;text-align: center;
使用flexbox
给父级元素设置·display: flex;justify-content: center;·即可
垂直居中
inline 或 inline-* 元素单行垂直居中
方法一:上下使用相同的padding(推荐)
上下和左右使用相同的padding可以不用设置宽高,既可以在修改文本内容是自适应,又可以减少出现BUG的几率
.link {
padding-top: 30px;
padding-bottom: 30px;
}
方法二:设置line-height与高度相同
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
/*nowrap文本内的换行无效内容只能在一行显示*/
}
多行文本垂直居中
方法一:display: table;和vertical-align: middle;
.center-table {
display: table;
}
.center-table p {
display: table-cell;
vertical-align: middle;
}
使用flex布局多行文本居中
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
block元素垂直居中
1. 已知block元素高度
原理是绝对定位,top: 50%;然后 margin-top设置为负边距且值为他本身高度的一半.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
2.block元素高度未知垂直居中
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3.使用flex布局block元素高度未知垂直居中
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
CSS学习资源
- Google: 关键词 MDN
- CSS Tricks
- Google: 阮一峰 css
- 张鑫旭的 240 多篇 CSS 博客
- Codrops 炫酷 CSS 效果
- CSS揭秘
- CSS 2.1 中文 spec
- Magic of CSS 免费在线书
参考资料：
- https://css-tricks.com/left-and-right/（Google搜索 ：left and right layout css tricks）
- https://css-tricks.com/centering-css-complete-guide/ （Google搜索：center css tricks）
- CSS居中完全指南——构建CSS居中决策树
