css实现垂直居中，三栏布局
2019-05-17 本文已影响0人
梦想成真213
css实现垂直居中的五种方式，三栏布局的四种方式，以及1px 在手机上显示很粗的处理方法
直接上代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" >
<title>Document</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
color:#fff;
}
.mybox{
width:100px;
height:100px;
background: green;
margin-bottom: 10px;
color:#fff;
}
.mask{
height:100%;
background: #333;
opacity: 0.5;
margin-bottom:20px;
}
.div{
width:50%;
height:300px;
margin-bottom: 10px;
background: #eee;
margin:0 auto 10px;
}
.section{
width:50%;
background: red;
margin:0 auto;
}
/*高度不固定水平垂直居中：方法一:伪类*/
.div1{
text-align: center;
}
.section1{
display: inline-block;
vertical-align: middle;
}
.div1:after{
content:"";
width:0;
height:100%;
display: inline-block;
vertical-align: middle;
}
/*方法二：translate*/
.div2{
position: relative;
}
.section2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*第三种方法：table-cell*/
.div3{
display: table-cell;
text-align: center;
vertical-align: middle;
}
/*方法四：position：absolute*/
.div4{
position: relative;
}
.section4{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
width: 33%;
height: 60%;
}
/*方法五：flex布局实现垂直水平居中*/
.div5{
display:flex;
justify-content: center;
align-items: center;
}
/*三栏布局方法,左右定宽，中间自适应：*/
.clearfix{zoom:1;}
.clearfix:after{
content:'.';
display: block;
width:0;
height:0;
visibility: hidden;
overflow: hidden;
}
/*方法一：左右浮动*/
.left1{
width:200px;
height:200px;
float:left;
background: red
}
.right1{
width:300px;
height:200px;
float:right;
background: red
}
.content1{
margin:0 300px 0 200px;
background: green;
height:200px;
}
/*方法二：absolute*/
.left2{
width:200px;
background: red;
position: absolute;
top:0;
bottom: 0;
left:0;
}
.right2{
width:300px;
background: red;
position: absolute;
top:0;
right:0;
bottom: 0;
}
.content2{
margin:0 300px 0 200px;
background: green;
height:200px;
}
/*方法三：margin负值*/
.left3{
margin-left: -100%;
}
.right3{
margin-left: -200px;
}
.left3, .right3 {
width: 200px;
height: 100%;
float: left;
background: #a0b3d6;
}
.content3{
width: 100%;
height: 100%;
float: left;
background: green;
}
.main{
margin:0 210px;
height:100%;
}
/*方法四：flex*/
.wrap4{
display: flex;
}
.content4{
flex:1;
background: green;
}
.left4,.right4{
flex:0 0 200px;
}
.left4{
background: red;
}
.right4{
background: red;
}
/*1px 在手机上显示很粗的处理方法*/
/*1条border的情况*/
.border-1px:after{
content:'';
display: inline-block;
position: absolute;
background: #000;
left:0;
bottom: 0;
width:100%;
height:1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.border-1px-4:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
</head>
<body>
<div class="mask">
<div class="div div1">
<section class="section section1">
<div class="mybox">伪类实现垂直居中</div>
</section>
</div>
<div class="div div2">
<section class="section section2">
<div class="mybox">translate实现垂直居中</div>
</section>
</div>
<div class="div div3">
<section class="section section3">
<div class="mybox">display:table-cell实现垂直居中</div>
</section>
</div>
<div class="div div4">
<section class="section section4">
<div>position:absolute实现垂直居中</div>
</section>
</div>
<div class="div div5">
<section class="section section5">
<div>flex布局实现垂直居中</div>
</section>
</div>
</div>
<div style="margin-top:20px" class="clearfix">
<div class="left1"></div>
<div class="right1"></div>
<div class="content1"></div>
</div>
<div style="margin-top:20px;height:200px;position: relative;" class="clearfix">
<div class="left2"></div>
<div class="content2"></div>
<div class="right2"></div>
</div>
<div style="margin-top:20px;height:200px;" class="clearfix">
<div class="content3">
<div class="main">main</div>
</div>
<div class="left3"></div>
<div class="right3"></div>
</div>
<div style="margin-top:20px;height:200px;" class="wrap4">
<div class="left4">left</div>
<div class="content4">content</div>
<div class="right4">right</div>
</div>
<div style="width:100%;height:100px;position: relative;padding:20px;box-sizing:border-box;margin:20px auto;">
<div class="border-1px-4" style="width:100%;height:100px;position: relative;padding:20px;box-sizing:border-box;margin-bottom: 50px;"></div>
</div>
</body>
</html>
