水平垂直居中的方法
方法一 ?已知容器的寬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>
?
如有錯誤 請指正 ?前端菜鳥一枚
?
轉載于:https://www.cnblogs.com/shareli/p/6641124.html
總結
- 上一篇： 5g专利各公司占有率
- 下一篇： IconFont的制作使用