如何水平居中一个div?
1.不需要知道宽高
css:
#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute/fixed;
top:0;bottom:0;left: 0;right: 0;margin:auto;
}
html:
<div id="wrap"</div>
2.知道宽高
css:
#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute;
top:50%;left: 50%;margin-top:-100px;margin-left: -100px;
}
html:
<div id="wrap"</div>
3.弹性盒
css:
*{margin:0;padding: 0;}
html,body{
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
#wrap{
width: 200px;
height: 200px;
background: orange;
}
html:
<div id="wrap"</div>
如何居中一个浮动元素?
css:
.outerbox {
float: left;
position: relative;
left: 50%;
}
.innerbox {
float: left;
position: relative;
right: 50%;
}
html:
<div class="outerbox">
<div class="innerbox">我是浮动的</div>
</div>
如何让绝对定位的div居中
css:
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略,且为0*/
right: 0; /*此处不能省略,且为0*/
}
html:
<div class="center"></div>