您的位置：首页 > Web前端 > CSS

div水平垂直居中的方法

2018-01-26 15:47 309 查看

下面几个方法的html 代码

<div id="box">
<div id="div"> </div>
</div>

方法一：（只能用于已知宽高的div）；

兼容性：IE7+；

/* css代码：*/
#box{
position:relative;
}
#div {
height: 200px;
width: 200px;
/* 主要代码 */
position:absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

方法二：（不需要知道div宽高）

兼容性：IE8+

/* css代码*/
#box{
position:relative;
}
#div{
height: 200px;
width: 200px;
/* 主要代码 */
position: absolute;
top: 0;
botton: 0;
left: 0;
right: 0;
margin: auto;
}

方法三：（使用css3方法）

兼容性：IE9+；

/* css代码*/
#box{
position:relative;
}
#div{
height: 200px;
width: 200px;
/* 主要代码 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

方法四：（css3的弹性盒子-代码最少）

兼容性：IE10+

#box{
display: flex;
justify-content: center;
align-items: center;
}

方法五：（利用table表格）

兼容性： IE8+

/* css代码*/
#table{
display: table;
}
#table-cell{
display: table-cell;
text-align: center;
vertical-align:middle;
}
#div{
diaplay:inline-block;
}
/* html代码 */
<div id="table">
<div id="table-cell">
<div id="div"> <div>
</div>
<div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 css

相关文章推荐

新的分享

章节导航