布局总结-⽔平居中布局的实现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实现
1. ⾸先text-align只针对inline元素有效，因此，可以在⽗元素设置text-align:center，然后改变⼦元素display:block为inline-block.
2. 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实现
1. ⾸先定宽的块级元素可以设置margin:0 auto实现⽔平居中
2. display:table这个元素的作⽤就像 <table> 元素. 它定义了⼀个块级盒⼦.
3. 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%)实现
1. ⾸先对⽗元素设置position: relative
2. 对⼦元素设置绝对定位，相对于⽗元素定位
3. ⽤left:50%则可以根据左边进⾏定位
4. 根据transform，则可以根据⾃⾝的宽度偏移
5. 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实现
1. 对⽗元素设置display:flex，则第⼀级⼦元素是flex-item
2. 对⼦元素设置justify-content: center；就可以实现居中
/
1. 也可以对⼦元素设置margin:0 auto实现居中
2. index04.css的代码为：
.parent{
height: 200px;
background-color: gray;
display: flex;
justify-content: center;
}
.child{
height: 200px;
background-color: greenyellow;div中的div居中
/*  margin: 0 auto;  */
}
三、左中右布局
左中右布局参考⼀的左右布局，可将三个元素都设置成float:left 或者将三个元素都设置成dispaly：inline-block
四、垂直居中
1. height和line-height设置垂直居中
2. display:flex和align-items: center`
3. ⾏级元素设置vertial-align: middle

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。