588

<div>垂直方向と水平方向の両方で要素をページの中央に配置する最良の方法は?

水平が中心になることはわかっていmargin-left: auto; margin-right: auto;ますが、垂直にも行うための最良の方法は何ですか?

4

30 に答える 30

790

最善かつ最も柔軟な方法

このデモの主なトリックは、要素が上から下に移動する通常の流れでは、margin-top: autoがゼロに設定されることです。ただし、絶対配置された要素は、フリー スペースの分散に対して同じように機能し、同様に、指定されたtopandで垂直方向に中央揃えにすることができますbottom(IE7 では機能しません)。

##このトリックは、任意のサイズのdiv.

div {
    width: 100px;
    height: 100px;
    background-color: red;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}
<div></div>

于 2012-11-13T06:27:16.413 に答える
153

Even though this did not work when the OP asked this question, I think, for modern browsers at least, the best solution is to use display: flex or pseudo classes.

You can see an example in the following fiddle. Here is the updated fiddle.

For pseudo classes an example could be:

.centerPseudo {
    display:inline-block;
    text-align:center;
}

.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
}

The usage of display: flex, according to css-tricks and MDN is as follows:

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: center;
}

There are other attributes available for flex, which are explained in above mentioned links, with further examples.

If you have to support older browsers, which don't support css3, then you should probably use javascript or the fixed width/height solution shown in the other answers.

于 2013-09-04T15:43:57.953 に答える
107

この手法のシンプルさは驚くべきものです:
(ただし、この方法には意味がありますが、残りのコンテンツの流れに関係なく要素を中央に配置するだけでよい場合は、問題ありません。注意して使用してください)

マークアップ: 

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>

そしてCSS： 

div {
  color: white;
  background: red;
  padding: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

これにより、要素が水平方向および垂直方向にも中央揃えになります。負のマージンはなく、変換の力だけです。また、IE8 のことはもう忘れるべきではないでしょうか。

于 2015-01-16T16:03:17.100 に答える
28

Flex Display を活用したシンプルなソリューション

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

http://css-tricks.com/snippets/css/a-guide-to-flexbox/をご覧ください

最初の div は画面全体を占め、すべてのブラウザーに display:flex が設定されています。2 番目の div (中央の div) は、margin:auto が見事に機能する display:flex div を利用しています。

IE11+ との互換性に注意してください。(プレフィックス付きの IE10)。

于 2015-01-09T20:58:07.890 に答える
25

CSS で div の中心を揃えるには 2 つの方法があると思います。

.middleDiv {
    position : absolute;    
    width    : 200px;
    height   : 200px;
    left     : 50%;
    top      : 50%;
    margin-left : -100px; /* half of the width  */
    margin-top  : -100px; /* half of the height */
}

これがシンプルで最良の方法です。デモについては、以下のリンクにアクセスしてください。

http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizo​​ntally-and.html

于 2013-07-06T11:37:08.837 に答える
22

新しいブラウザ(IE10+)をご覧の場合は、

次に、変換プロパティを使用して、div を中央に揃えることができます。

<div class="center-block">this is any div</div>

css は次のようになります。

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

ここでの問題は、div 自体が処理するため、div の高さと幅を指定する必要さえないことです。

また、div を別の div の中央に配置する場合は、外側の div の位置を相対的に指定するだけで、この CSS が div に対して機能し始めます。

使い方：

left and top を 50% に指定すると、div はページの右下 4 分の 1 に配置され、左上端がページの中央に固定されます。これは、左側/上部のプロパティ (% で指定された場合) が外側の div (この場合はウィンドウ) の高さに基づいて計算されるためです。

ただし、変換は要素の高さ/幅を使用して翻訳を決定するため、div は左 (幅の 50%) と上 (高さの 50%) に移動します。これらはネガで指定されるため、ページの中央に配置されます。

古いブラウザーをサポートする必要がある場合 (IE9 も含めて申し訳ありません)、テーブル セルを使用するのが最も一般的な方法です。

于 2015-07-26T17:38:31.500 に答える
15

ボックスを垂直方向と水平方向の両方の中央に配置するための私の好みの方法は、次の手法です。

外箱

  • すべきだったdisplay: table;

内側の容器

  • すべきだったdisplay: table-cell;
  • すべきだったvertical-align: middle;
  • すべきだったtext-align: center;

コンテンツボックス

  • すべきだったdisplay: inline-block;
  • 水平方向のテキスト配置を再調整する必要があります。text-align: left;またはtext-align: right;、テキストを中央に配置する場合を除きます

このテクニックの優れた点は、高さや幅を気にせずにコンテンツをコンテンツ ボックスに追加できることです。

デモ

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

この Fiddleも参照してください。

編集

transform: translate(-50%, -50%);はい、 orを使用しても多かれ少なかれ同じ柔軟性を実現できることはわかっていますtransform: translate3d(-50%,-50%, 0);。私が提案している手法は、はるかに優れたブラウザー サポートを備えています。-webkit、-msまたは-mozのようなブラウザのプレフィックスを使用しても、transformまったく同じブラウザ サポートは提供されません。

したがって、古いブラウザ (例: IE9 以下) が気になる場合はtransform、ポジショニングに使用しないでください。

于 2016-02-25T23:22:01.397 に答える
13

これは私がしばらく前に書いたスクリプトです（jQueryライブラリを使用して書かれています）：

var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
        return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};
于 2008-12-10T17:16:16.960 に答える
8

私はパーティーに遅れていることを知っていますが、未知の次元の親の中に未知の次元を持つ div を中央に配置する方法を次に示します。

スタイル：

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>

HTML:

<div class="table">
    <div class="table-cell"><div class="centered">centered</div></div>
</div>

デモ：

このデモをご覧ください。

于 2014-07-24T13:48:05.940 に答える
8

手遅れですが、これはとても簡単でシンプルです。ページ中央は常に左 50%、上 50% です。したがって、div の幅と高さを 50% 引いて、左マージンと右マージンを設定します。それがどこでもうまくいくことを願っています -

body{
  background: #EEE;
}
.center-div{
  position: absolute;
  width: 200px;
  height: 60px;
  left: 50%;  
  margin-left: -100px;
  top: 50%;
  margin-top: -30px;
  background: #CCC;
  color: #000;
  text-align: center;
}
<div class="center-div">
  <h3>This is center div</h3>
</div>

于 2018-04-26T04:58:51.197 に答える
6

css3 を使用して、未知の高さの div を垂直方向に中央揃えできる解決策が実際にあります。トリックは、div を 50% 下に移動してから、 を使用transformYして中央に戻すことです。唯一の前提条件は、中心化される要素に親があることです。例：

<div class="parent">
    <div class="center-me">
        Text, images, whatever suits you.
    </div>
</div>

.parent { 
    /* height can be whatever you want, also auto if you want a child 
       div to be responsible for the sizing */ 
    height: 200px;
}

.center-me { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

すべての主要なブラウザーと IE 9 以降でサポートされています (IE 8 については気にしないでください。今秋、win XP とともに終了します。ありがたいことに。)

JS フィドルのデモ

于 2014-09-22T16:06:54.373 に答える
5

「display:table」ルールを利用して、ここから取得したもう 1 つの方法 (防弾) :

マークアップ

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}
于 2014-10-09T15:44:29.513 に答える
4

別の答えはthisです。

<div id="container"> 
    <div id="centered"> </div>
</div>

そしてCSS：

#container {
    height: 400px;
    width: 400px;
    background-color: lightblue;
    text-align: center;
}

#container:before {
    height: 100%;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

#centered {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}
于 2014-12-11T14:16:49.093 に答える
3

定義されたサイズがわかっている場合は、divを使用できますcalc。

実際の例: https://jsfiddle.net/o8416eq3/

注: これは、CSS で「div」の幅と高さをハードコーディングした場合にのみ機能します。

#target {
  position:fixed;
  top: calc(50vh - 100px/2);
  left: calc(50vw - 200px/2);
  width:200px;
  height:100px;
  background-color:red;
}
<div id='target'></div>

于 2016-06-16T11:59:42.373 に答える
0

返信が遅くなり申し訳ありませんが、最善の方法は

  div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }

margin-top と margin-left は、div ボックスのサイズに従う必要があります

于 2013-10-16T14:58:45.710 に答える
0

この解決策は私のために働いた

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(または高さ: 70% / 下: 15%

高さ : 40% / 底部 :30% ...)

于 2012-08-24T14:03:22.603 に答える