CSS布局
一、左右布局
1、float实现左右布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index01.css">
<title>居中布局的几个实现方案</title>
</head>
<body>
<div class="left"></div>
<div class="right">DEMO</div>
</body>
</html>标签结构很简单，就是一个父元素里面套了一个子元素
想要实现左右布局，只需要把<div class="left"></div>设置成向左浮动，右边向右浮动
.left{
float: left;
}
.right{
float: right;
}或者把left和right设置成inline-block
.left{
display: inline-block
}
.right{
display: inline-block
}二、居中布局
1、html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index01.css">
<title>居中布局的几个实现方案</title>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>标签结构很简单，就是一个父元素里面套了一个子元素
2.用text-align和inline-block实现
- 首先
text-align只针对inline元素有效，因此，可以在父元素设置text-align:center,然后改变子元素display:block为inline-block. -
index01.css的代码为：
.parent{
height: 200px;
background-color: gray;
text-align: center;
}
.child{
background-color: yellowgreen;
height: 200px;
width: 200px;
display: inline-block;
}3.用display:table和margin:0 auto实现
- 首先定宽的块级元素可以设置
margin:0 auto实现水平居中 -
display:table这个元素的作用就像<table>元素. 它定义了一个块级盒子. -
index02.css的代码为;
.parent{ height: 200px; background-color: gray; } /*display:table 在表现形式上很像是block元素 宽度跟着内容走。 */ .child{ display: table; margin: 0 auto; background-color: greenyellow; height: 200px; width: 200px; text-align: center; line-height: 200px; }
4.用position:absolute和left: 50%以及transform: translateX(-50%)实现
- 首先对父元素设置
position: relative - 对子元素设置绝对定位，相对于父元素定位
- 用
left:50%则可以根据左边进行定位 - 根据
transform，则可以根据自身的宽度偏移 -
index03.css的代码为：
.parent{ height: 200px; background-color: gray; position: relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%); height: 200px; background-color: greenyellow; }
5.用flex+justify-content实现
- 对父元素设置
display:flex，则第一级子元素是flex-item - 对子元素设置
justify-content: center;就可以实现居中
/////////
- 也可以对子元素设置
margin:0 auto实现居中 -
index04.css的代码为：
.parent{ height: 200px; background-color: gray; display: flex; justify-content: center; } .child{ height: 200px; background-color: greenyellow; /* margin: 0 auto; */ }
三、左中右布局
左中右布局参考一的左右布局，可将三个元素都设置成float:left
或者将三个元素都设置成dispaly：inline-block
四、垂直居中
-
height和line-height设置垂直居中 -
display:flex和align-items: center` - 行级元素设置vertial-align: middle