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

私は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;
}

を設定する必要が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>

これはIE8では機能しませんが、検討するオプションになる可能性があります。幅を指定したくない場合に主に役立ちます。

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

上記の答えは正しいですが、初心者のためにそれを簡単にするために、あなたがする必要があるのは、左と右のマージンを設定することです。次のコードは、幅が設定され、位置が絶対であれば、それを実行します。

margin: 0 auto;
left: 0;
right: 0;

デモ：

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }

<div class="centeredBox">Centered Box</div>

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

.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>

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

とても簡単で、マージンと左、右のプロパティのみを使用します：

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

このヒントで詳細を確認できます=> div要素をhtmlの中央に設定する方法-Obinbブログ

ここにリンクがあります。絶対位置の場合、これを使用してdivを中央に配置してください。

HTML：

<div class="bar"></div>

CSS：

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

jsfiddleの例

あなたは使用することはできません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;
    }

}