中心位置水平固定 [英] Center position fixed horizontally

问题描述

我想在 body 的末尾动态附加一个固定位置到底部框的宽度为 1000 像素并水平居中的框.

当我用百分比宽度创建它时，我可以轻松地添加边距并且一切正常，但是当我以像素为单位时，我不能再添加边距(它必须是响应式的).auto 也不起作用.

我该怎么做?

<div style="position: fixed; bottom: 0; width: 1000px; margin: 0 auto; padding: 0;height: 100px; background-color: green;">

解决方案

http://jsfiddle.net/eesry2ss/

body:after {内容:"";宽度:1000px；高度:100px；位置:固定；左:50%；底部:0;左边距:-500px；背景颜色:绿色；}

I want to dynamically append to the end of the body a fixed-positioned to the bottom box that has 1000px width and is centered horizontally.

When I create it with percentage width I can easily add margins and everything is ok, but when I have it in pixels I can't add margins anymore (it has to be responsive). auto doesn't work either.

How can I do that?

<div style="position: fixed; bottom: 0; width: 1000px; margin: 0 auto; padding: 0;height: 100px; background-color: green;">
</div>

解决方案

http://jsfiddle.net/eesry2ss/

body:after {
    content:"";
    width: 1000px;
    height: 100px;
    position: fixed;
    left: 50%;
    bottom:0;
    margin-left: -500px;
    background-color:green;
}

这篇关于中心位置水平固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！