1.实现div的水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
*{
margin:0;
padding:0;
}
/*不需固定宽高*/
.box{
background: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*需要固定宽高*/
/*.box{
200px;
height: 200px;
background: #f00;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}*/
/*需要固定宽高*/
/*.box{
200px;
height: 200px;
background: #f00;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}*/
/*div的子元素水平垂直居中*/
/*.wrap{
500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background: #e8e8e8;
}
.box{
background: #f00;
}*/
/*需指定宽度的居中*/
/*.wrap{
500px;
height: 500px;
display: table-cell;
vertical-align: middle;
background: #e8e8e8;
}
.box{
100px;
background: #f00;
margin: auto;
}*/
/*百分比控制居中*/
/*.wrap{
500px;
height: 500px;
background: #e8e8e8;
position: relative;
}
.box{
left: 38%;
right: 38%;
top: 38%;
bottom: 38%;
position: absolute;
background: #f00;
}*/
</style>
</head>
<body>
<div class="wrap">
<div class="box">我是小可爱.</div>
</div>
</body>
</html>
2.左侧固定，右侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧固定，右侧自适应</title>
<style>
.wrap{
800px;
height: 800px;
position: relative;
}
/*利用浮动*/
.left{
200px;
height: 100%;
background: #eee;
float: left;
}
.right{
height: 100%;
margin-left:200px;
background: #f00;
}
/*利用定位*/
/*.left{
200px;
height: 100%;
background: #eee;
position: absolute;
}
.right{
height: 100%;
margin-left: 200px;
background: #f00;
}*/
</style>
</head>
<body>
<div class="wrap">
<div class="left">我在左侧</div>
<div class="right">我在右侧</div>
</div>
</body>
</html>
3.三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.wrap{
800px;
height: 800px;
position: relative;
}
/*左中固定，右侧自适应：利用浮动*/
/*.left{
200px;
height: 100%;
background: #eee;
float: left;
}
.middle{
100px;
height: 100%;
background: #333;
float: left;
}
.right{
height: 100%;
margin-left: 300px;
background: #f00;
}*/
/*左中固定，右侧自适应：利用定位*/
/*.left{
200px;
height: 100%;
background: #eee;
position: absolute;
}
.middle{
100px;
height: 100%;
background: #333;
position: absolute;
left: 200px;
}
.right{
height: 100%;
margin-left: 300px;
background: #f00;
}*/
/*左右固定，中间自适应*/
.left{
200px;
height: 100%;
background: #eee;
position: absolute;
}
.middle{
height: 100%;
background: #333;
position: absolute;
left: 200px;
right: 100px;
}
.right{
height: 100%;
100px;
background: #f00;
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">我在左侧</div>
<div class="middle">我在中间</div>
<div class="right">我在右侧</div>
</div>
</body>
</html>
4.待补充……