web-dev-qa-db-ja.com

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;
}
csshtmlcenterabsolute
166
CoreDo

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

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

'top'と似ていますが、ボックスの右マージンEdgeがボックスの包含ブロックの[right/left] Edgeの[left/right]からどれだけ離れているかを指定します。

出典：http://www.w3.org/TR/CSS2/visuren.html#position-props

注：エレメントはウィンドウより幅小さいである必要があります。そうでない場合は、ウィンドウの幅全体を占めます。 。

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

これはIE 8では機能しませんが、検討するオプションかもしれません。幅を指定したくない場合は主に便利です。

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

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

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>
13
Meta Pakistani

フレックスボックス？あなたはflexboxを使うことができます。

.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>
5
Ron Royston
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
3
Z. Rahman Raju

とても簡単なので、marginとleft、rightのプロパティだけを使ってください。

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

あなたはこのティップでもっと見ることができます=> どのようにdiv要素をhtml-センターでセンターにセットするか - Obinbブログ

2
Neko

ここにリンクがあります。位置が絶対の場合、これを使って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

0
Amit Kumar