首页 > 代码库 > 水平垂直居中的方法
水平垂直居中的方法
方法一 已知容器的宽500高300
div{
width:500px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-150px;//这里也可以采用margin的复合写法margin：-150px 0 0 -250px；
background:‘black‘;//易于辨别
}
方法二： 不知宽高
div{
position:absolute;
top:50%;
left:50%;
transfrom:translate(-50%,-50%);//translate(x,y)相当于元素中心位置的移动
background:‘black‘
}
方法三 flex布局（具体的去看阮老师的博客讲解的很详细 不过要注意兼容，）
container{
display:-wekkit-flex;
display:flex;
align-items：center;//垂直居中
justify-content：center;//水平居中
}
container div{
width：100px;
height:100px;
}
关于两列布局的方法
方法1：浮动
<style type="text/css">
#left{
float: left;
width: 100px;
height: 100px;
background: red;
}
#right{
margin-left: 110px;
height: 100px;
background: red;
}
</style>
<div id="left"></div>
<div id="right"> </div>
方法二 弹性布局
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
}
#left{
width: 100px;
background: red;
}
#right{
flex: 1;
margin: 0 0 0 20px;
background:red;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
如有错误 请指正 前端菜鸟一枚
水平垂直居中的方法