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

CSS---在浏览器中双向居中

2016-03-04 13:39 597 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100%;
}
div{
border: 1px solid #999;
background: #ccc;
width: 200px;
height: 200px;
}

/*在浏览器中双向居中1，实测偏下*/
.style1{
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-right: -100px;

}

/*在浏览器中双向居中2，实测偏下*/
.style2{
position: fixed;
left: 50%;
top:50%;
margin-left: -100px;
margin-right: -100px;
}

/*在浏览器中双向居中3，实测完美*/
.style3{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

/*在浏览器中双向居中4，实测完美*/
.style4{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

}

/*在浏览器中双向居中，在FF,IE,Chorme中实测通过，有点偏下。
使用CSS3新属性transform:translate*/
.style5{
position: absolute;
top: 50%;
left: 50%;
transfrom:translate(-50%,-50%);
/*-webkit-transfrom:translate(-50%,-50%);
-moz-transfrom:translate(-50%,-50%);
-ms-transfrom:translate(-50%,-50%);*/
}

/*弹窗居中，在IE，FF，Chrome实测无效*/
.outbox:before{
content: "";
width: 0;
height: 100%;
display: inline-block;
vertical-align:middle;
}
.outbox{
position: fixed;
top:0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
.content{
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
}

/*在元素内部居中，只有一行（不换行）时可以实现垂直居中*/
.center_vertical1{
text-align: center;
line-height: 200px;
}
/*将元素改成单元格显示模式，在IE,FF,Chrome实测无效*/
.center_vertical2{
display:table-cell;
text-align: center;
vertical-align: center;
}
/*使用CSS3 的-webkit-box，在chrome中通过，FF,IE实测无效*/
.center_vertical3{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display: -moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display: -ms-box;
-ms-box-pack:center;
-ms-box-align:center;
display: box;
box-pack:center;
box-align:center;
}

</style>
</head>
<body>
<div class="style6 center_vertical3">别迷信哥，哥其实只是一个传说！</div>
<div class="outbox">
<div class="content">do it youself.</div>
</div>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航