- 左右布局
- 左中右布局
- 水平居中
- 垂直居中
- 左右布局
左右布局.png
方法1：利用float实现左右布局
- 给所有子元素加 float: left
- 给父元素加 clearfix 类，清除浮动影响
- html代码：
<body>
<div class="wrap clearfix">
<div class="left-box">
左边
</div>
<div class="right-box">
右边
</div>
</div>
</body>
- 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;
}
方法2：使用绝对定位实现
- 子元素绝对定位 position:absolute;
- 父元素相对定位 position:relative;
- 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;
}
方法3：使用表格样式
- 将父容器转换为表，给父容器设置
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;
}
方法4：使用inline-block
- 给父元素中的子元素添加
display: inline-block; - 需要将两个div靠在一起，具体请看下面的代码，因为如果不靠在一起的话，会产生一个空格间隔，导致布局发生改变
- html同上
- 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;
}
方法5：使用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;
}
方法6：使用网格布局grid
定义一个容器，然后将其拆分成可以用子元素灵活填充的列和单元格
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
- 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;
}
方法二：使用Flexbox
- 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;
}
- 水平居中
1. 内联元素水平居中
在块级父元素内水平居中内联元素
.center-children {
text-align: center;
}
2. 块级元素水平居中
margin设置左右auto
.center-me {
margin: 0 auto;
}
3. 多个块级元素水平居中
- 方法一：使用
inline-block,给元素设置display: inline-block;,设置父级元素的属性width: 100%;text-align: center; - 方法二：使用flexbox,给父级元素设置
display: flex;justify-content: center;
-垂直居中
1.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文本内的换行无效内容只能在一行显示*/
}
2. 多行文本垂直居中
- 方法一：方法一:
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;
}
3. block元素垂直居中
- 已知block元素高度
原理是绝对定位,top: 50%;然后 margin-top设置为负边距且值为他本身高度的一半.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
- block元素高度未知垂直居中
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
- 使用flex布局block元素高度未知垂直居中
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
