CSS定位到中心加x像素答案

【问题标题】：CSS positioning to center plus x pixelCSS定位到中心加x像素
【发布时间】：2014-11-24 22:21:42
【问题描述】：

有没有办法只使用CSS定位中心加x像素adiv？

我现在有这个 CSS 代码：

#mydiv {
    display: block;
    width: 200px;
    margin: 200px auto;
}

我想将此 div 定位到中心 + 300px 到右侧。可以只使用 CSS 吗？

（我知道here is a way 使用 jQuery，但我只想使用 CSS。）

【问题讨论】：

你能详细说明你的问题吗？顺便说一句，也许 css calc 可以帮助你：developer.mozilla.org/en-US/docs/Web/CSS/calc
IE支持对你来说很重要吗？使用 CSS3（转换、计算...）有几种解决方案可以解决这个问题，但它们不适用于较旧的浏览器。如果您希望在不使用 CSS3 的情况下支持更广泛的浏览器，我在下面提供了我的答案。

标签： jquery html css

【解决方案1】：

您可以通过将transform: translateX(300px); 添加到#mydiv 来实现。

看看 JSFiddle DEMO

#mydiv {
    display: block; 
    width: 200px; 
    margin: 200px auto; 
    transform: translateX(300px); 
}

【讨论】：

【解决方案2】：

是的，对于支持 CSS3 的浏览器calc()。

#mydiv {
    display: block;
    width: 200px;
    margin-left: calc(50% + 200px); /* 50% - 100px (half of the div) + 300px */
}

    #mydiv {
      display: block;
      width: 200px; height: 50px;
      margin-left: calc(50% + 200px);
      /* 50% - 100px (half of the div) + 300px */
      background: blue;
    }

&lt;div id="mydiv"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

首先，检查Fiddle Demo

如果您可以稍微调整一下您的 HTML，则可以不使用任何 CSS3 技巧。诀窍是定位一个.wrapper元素，大小为0X0 px在屏幕的中心（在这个例子中是.container），在这个包装里面你可以定位你的.content并使用它的'偏移量'（right/left 属性）。希望它有所帮助:-)

HTML

<div class="container">
    <div class="anchor">
        <div class="content"></div>
    </div>
</div>

CSS

.container {
    background-color:red;
    position:relative;
    height:500px;
}
.anchor {
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    overflow:visible;
}
.content{
    position:absolute;
    right:-100px; /* play with this to shift the content from the center... */
    width:200px;
    height:50px;
    background-color:blue;
}

【讨论】：

【解决方案4】：

像这个例子：https://jsfiddle.net/j6rnvdzp/?

div {
    display: block;
    width: 200px;
    margin: 200px auto;
    background-color:red;
    position:absolute;
    right:-300px;
        left:0;
}

【讨论】：