您的位置：首页 > 其它

使用属性position:fixed的时候如何才能让div居中

2017-01-03 15:32 253 查看
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/53994537

本文出自【我是干勾鱼的博客】

有的时候我们会需要让一个div使用position:fixed属性，当然什么时候使用这个属性可以参考我的一篇文章《css的position定位属性中值absolute与值fixed二者的区别》。

这个时候有一个棘手的问题是如何在这个时候让div居中显示，可以这样来实现：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<style>
.aa
{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
width: 200px;
height: 200px;
margin-left:auto;
margin-right:auto;
}

.bb {
border: solid yellow;
background: red;
z-index:9988;
}

</style>

<script type="text/javascript">
</script>

</head>
<body>

<div class="aa" >
<div class="bb">aaabbbcccdddeeefffggghhhiiijjjkkklll</div>
<div class="bb">胡适的杂文很好看</div>
<div class="bb">或者，你可以看看林语堂的小说</div>
</div>

</body>
</html>


这里代码：

.aa
{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
width: 200px;
height: 200px;
margin-left:auto;
margin-right:auto;
}


是关键。div就居中了，如图所示：



至于如何让这个div中的英文文字不溢出，可以参考我的文字：《div缩小时，里面的英文不会溢出功能的实现》。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航