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

来源：互联网发布：高仿鞋淘宝上怎么找编辑：程序博客网时间：2024/06/06 01:31

转载请注明出处：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