Question

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

我现在有这个CSS代码：

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

我想把这个div定位到中心+ 300px到右边。可以只使用CSS吗？

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

Answer 1

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

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

＆＃13;

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

＆＃13;

<div id="mydiv"></div>

＆＃13;

Answer 2

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

来实现此目的

JSFiddle - DEMO

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

Answer 3

像这样：http://jsfiddle.net/j6rnvdzp/？

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

Answer 4

首先，检查 Fiddle Demo

如果您可以稍微调整HTML，则可以不使用任何CSS3技巧。诀窍是在屏幕中央放置一个大小为0X0像素的.wrapper元素（在本例中为.container），并在INSIDE这个包装器中定位.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;
}

CSS定位到中心加x像素

4 个答案: