css - CSSを使用して絶対divを水平方向に中央揃えする方法は?

Question

私はdivを持っていて、それを水平方向に中央に配置したい - 私はそれを与えているが、中央に配置されてmargin:0 auto;いない...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}

Answer 1

と を設定する必要がleft: 0ありright: 0ます。

これは、マージンの端をウィンドウの側面からどれだけオフセットするかを指定します。

'top' と同様ですが、ボックスの右マージンの端が、ボックスを含むブロックの [右/左] 端の [左/右] からオフセットされる距離を指定します。

ソース: http://www.w3.org/TR/CSS2/visuren.html#position-props

注:要素の幅はウィンドウよりも小さくする必要があります。そうしないと、ウィンドウの幅全体を占めることになります。

メディア クエリを使用して最小マージンを指定してからauto、より大きな画面サイズに移行できる場合。

---

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Answer 2

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

Answer 3

フレックスボックス? フレックスボックスを使用できます。

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

Answer 4

とても簡単です。margin と left、right プロパティのみを使用します。

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

詳細については、このヒントを参照してください => html で div 要素を中央に配置する方法 - Obinb ブログ

Answer 5

要素に使用することはできmargin:auto;ませposition:absolute;ん。不要な場合は削除してください。ただし、必要な場合はleft:30%;、最大値と最小値に ((100%-40%)/2) とメディア クエリを使用できます。

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}