一个固定div的CSS水平居中?
#menu {
position: fixed;
width: 800px;
background: rgb(255, 255, 255); /* The Fallback */
background: rgba(255, 255, 255, 0.8);
margin-top: 30px;
}
我知道这个问题有100万次,但是我找不到解决方案。 我有一个div,它应该固定在屏幕上,即使页面滚动,它也应该始终保持在屏幕中央!
div应该具有500px
宽度,应该距离顶部(margin-top) 30px
,对于所有浏览器尺寸应该在页面中间水平居中并且在滚动页面的其余部分时不应该移动。
那可能吗?
left: 50%;
margin-left: -400px; /* Half of the width */
这里的答案已经过时了。 现在,您可以轻松使用CSS3转换,而无需对边距进行硬编码。 这适用于所有元素,包括没有宽度或动态宽度的元素。
水平中心:
left: 50%;
transform: translateX(-50%);
垂直中心:
top: 50%;
transform: translateY(-50%);
水平和垂直两种:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
兼容性不是问题:http://caniuse.com/#feat=transforms2d
如果使用内联块是一个选项,我会推荐这种方法:
.container {
/* fixed position a zero-height full width container */
position: fixed;
top: 0; /* or whatever position is desired */
left: 0;
right: 0;
height: 0;
/* center all inline content */
text-align: center;
}
.container > div {
/* make the block inline */
display: inline-block;
/* reset container's center alignment */
text-align: left;
}
我在这里写了一篇短文:http://salomvary.github.com/position-fixed-horizontally-centered.html
链接地址: http://www.djcxy.com/p/13229.html