CSS垂直三列居中，中间⾃适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 让页⾯的⾼100%，如果不设置html，body ⾼100%的话，我们后⾯设置div⾼100%就没有效果了 */
html,body{
width:100%;
height:100%;
}
body,div{
margin:0;
padding:0;
}
/* 注意这⾥我给盒⼦添加了⼀个右边padding200px ，让中的那个盒⼦空200px给右边的盒⼦*/
#box{
position:relative;
padding-right:200px;
height:100%;
}
/
* 让盒⼦左浮动 */
#box .left{
float:left;
width:200px;
height:100%;
background-color:blue;
}
/* overflow让盒⼦独⽴出来，触动BFC，这⾥不设置overflow:hidden；的话他的宽就是100%了，但是我需要让他把左边的盒⼦的宽度空出来 */
#box .con{
overflow:hidden;
height:100%;
background-color:pink;
}
/* 这⾥不能设置浮动，只能是定位，因为中间的那个盒⼦没有浮动，所以中间的那个盒⼦会占据位置，只能⽤定位来做。 */
#box .right{
position:absolute;
right:0;
top:0;
width:200px;
height:100%;
background-color:#000;
}
</style>
</head>
<body>
<div id="box">
<div class="left"></div>
<div class="con"></div>
<div class="right"></div>
</div>
</body>
css设置文字垂直居中</html>
<!-- 这⾥虽然如果不给中间那个盒⼦设置overflow：hidden和给⼤盒⼦设置padding-right看起来效果是
⼀样的，但是实际上是不⼀样的，如果你把左边和右边的背景颜⾊去掉，你就会发现，中间的那个盒⼦占满了整个屏幕 -->

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