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

原创 2017年01月03日 15:32:41

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3 position fixed居中的问题

通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 如果还想让此元素位置固定呢?一般我们会添加position:fixed,如下: #element{ p...

css position: fixed; 垂直居中,绝对定位居中

.boxout{ background:#fff; z-index: 111;===display:none; box-shadow: 0 1px 4px #AAA; position: fix...
  • viqecel
  • viqecel
  • 2016年10月23日 16:26
  • 3176

CSS中position:fixed实现div居中及div内元素实现居中的方法

position:fixed实现div居中代码如下:div{ position:fixed; margin:auto; left:0; right:0; top...

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对...
  • czw2010
  • czw2010
  • 2013年04月07日 21:36
  • 62978

让body下的div居中, 并且适应各分辨率的方法

margin: 0px auto 浏览人数

fiddler本地代理替换js文件

这个也是第一次使用,只是单纯的为了在本地代理测试一下修改的文件是否正常显示,功能是否完善; ======================================================...

关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法

项目中有个需求时在页面的最下面有一排按钮,这排按钮需要固定到页面的最下面,不能随着屏幕的滚动为滚动。 问题: 功能是使用css的position:fixed; bottom:0;属性设置的。 单独...
  • MarkAsh
  • MarkAsh
  • 2016年09月22日 10:34
  • 3802

"把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部。 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题。但问题是当浏览

如果要接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监控. window.addEventListener("message",function(){},false); ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用属性position:fixed的时候如何才能让div居中
举报原因:
原因补充:

(最多只允许输入30个字)