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

标签: divcsspositionfixeddiv居中
673人阅读 评论(0) 收藏 举报
分类:

转载请注明出处: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缩小时,里面的英文不会溢出功能的实现》

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:425294次
    • 积分:5860
    • 等级:
    • 排名:第4634名
    • 原创:188篇
    • 转载:0篇
    • 译文:0篇
    • 评论:117条
    我的微信公众号
    欢迎大家关注我的微信公众号,使用微信搜索“东冬咚”或者“haidongzhisheng”。 更多精彩内容尽情期待!
    博客专栏
    最新评论