中心alignment固定的位置div
我试图得到一个有position:fixed的div position:fixed中心在我的页面上alignment。
我一直可以用绝对定位的div来使用这个“黑客”
left: 50%; width: 400px; margin-left:-200px
…其中margin-left的值是div的宽度的一半。
这似乎不适用于固定的位置div，而只是将它们的最左边的angular落放在50％，而忽略了margin-left声明。
任何想法如何解决这个问题，我可以中心alignment固定定位元素？
如果你能告诉我一个更好的方法来alignment绝对定位的元素，那么我会投入一个奖金M＆M。
对于具有相同问题但具有响应式devise的人员，还可以使用：
width: 75%; position: fixed; left: 50%; margin-left: -37.5%;
这样做将始终保持您的固定div在屏幕上居中，即使采用了响应式devise。
Koen的回答并不完全是这个元素的中心。
正确的方法是使用CCS3 transform属性。 虽然在一些旧的浏览器中不支持 。 而且我们甚至不需要设置固定或相对width 。
.centered { position: fixed; left: 50%; transform: translate(-50%, 0); }
在这里工作jsfiddle比较。
居中“固定”元素的一个好方法是将“中心”元素固定为100％宽度，其中的所有内容都将位于100％宽度“中心”的中心。
CSS将是：
#center{ position:fixed; width: 100%; //this basically stretches all over the window as fixed }
该html将是：
<html><head></head> <body> <center id='center'> ...elements </center> </body></html>
同样的方法可以应用于元素的绝对定位。
更新：对于那些认为中心标记被弃用的怀疑论者，它可以用一个应用了align =“center”属性的包装div来代替。 你甚至可以删除alignment，并可以使用文本alignment：中心 。
从上面的post来看，我认为最好的办法是
- 固定div与100％
- 在div里面，创build一个新的静态div或表，其中
margin-left:auto，margin-right:auto，或者表格使其居中。 - Tadaaaah，你现在已经集中了你的固定div
希望这会有所帮助。
正常div应使用margin-left：auto和margin-right auto，但对于固定div不起作用。 解决这个问题的方法类似于Andrew的答案，但是不使用弃用的东西。 基本上，只要给固定的div一个包装。
HTML：
<div id="wrapper"> <div id="fixed_div"></div> </div
CSS：
#wrapper { width: 100%; position: fixed; } #fixed_div { margin-left: auto; margin-right: auto; position: relative; width: 100px; text-align: center; }
这将在一个div中固定一个div，同时允许div与浏览器作出反应，也就是说如果div有足够的空间，div就会居中，否则会在浏览器的边缘发生粘连。 类似于一个正规的中心股反应。
如果你知道宽度是400px，这将是我猜的最简单的方法。
left: calc(50% - 200px);
我用Twitter Bootstrap（v3）
<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;"> <div class="container"> <p>Stuff - rows - cols etc</p> </div> </footer>
即做一个完整的宽度的元素是固定的位置，只是在其中推一个容器，容器相对于全宽居中。 应该也应该做得很好。
如果您希望元素像另一个导航栏一样横跨页面，则此方法可行。
宽度：计算（宽度：100％ – 宽度无论其他中心偏离它）
例如，如果你的侧面导航栏是200px：
宽度：calc（100％ – 200px）;
使用宽度很容易：70％; 左：15％;
将元素宽度设置为窗口的70％，并在两侧留出15％
如果你想中心alignment一个固定的位置div垂直和水平使用这个
position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
