CSS => センタリング

CSSトランスフォームの使用

CSSの変換は要素のサイズに基づいているため、要素の高さや幅がわからない場合は、相対的なコンテナの上端と左端から絶対的に50％を配置し、それを50％左または上に翻訳できますそれを垂直および水平にセンタリングする。

この手法では、要素が非整数のピクセル境界でレンダリングされてぼやけて見えることに注意してください。回避策については、この回答を参照してください。

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JSFiddleでの例を見る

CROSS BROWSER COMPATIBILITY

transformプロパティには、古いブラウザでサポートされる接頭辞が必要です。プレフィックスは、Chrome <= 35、Safari <= 8、Opera <= 22、Androidブラウザ<= 4.4.4、およびIE9で必要です。 CSS変換はIE8およびそれ以前のバージョンではサポートされていません。

これは前の例の一般的な変換宣言です：

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

詳細は、「 canIuse 」を参照してください。

詳しくは

要素は、最初の非静的な親（ position: relative 、 absolute 、またはfixed ）に従って配置されています。このフィドルとこのドキュメントのトピックで詳しく調べてください。

水平のみのセンタリングでは、 left: 50% 、 transform: translateX(-50%)ます。同じことが縦のみのセンタリングの場合：中央がtop: 50% 、 transform: translateY(-50%)です。

このようなセンタリング方法で非静的な幅/高さの要素を使用すると、センタリングされた要素が盛り上がって表示されることがあります。これは主にテキストを含む要素で発生し、 margin-right: -50%; margin-bottom: -50%; 。詳細はこのフィドルを見てください。

Flexboxの使用

HTML：

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS：

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

結果を見る

HTML：

<img src="http://lorempixel.com/400/200" />

CSS：

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

結果を見る

flexboxの詳細とスタイルの意味については、 FlexboxのドキュメントのDynamic Vertical and Horizontal Centeringを参照してください。

ブラウザのサポート

Flexboxは、 10より前のバージョンのIEを除くすべての主要なブラウザでサポートされています。

Safari 8やIE10などの最近のブラウザのバージョンには、ベンダープレフィックスが必要です。

プレフィックスを生成するための簡単な方法として、サードパーティのツールであるAutoprefixerがあります。

古いブラウザ（IE 8や9など）では、 Polyfillが利用可能です。

フレックスボックスブラウザのサポートの詳細については、この回答を参照してください。

位置の使用：絶対

古いブラウザで作業する（IE> = 8）

ゼロの値と対に自動マージン、 left及びright又はtopとbottomオフセットは、親の内部の絶対配置の要素を中心に説明します。

結果を見る

HTML

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
  position: relative;
  height: 500px;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

画像のような暗黙的な幅と高さを持たない要素は、定義された値を必要とします。

その他のリソース： CSSの絶対センタリング

ゴースト要素技術（MichałCzernowのハック）

この技術は、コンテナの寸法が不明な場合でも機能します。

100％の高さになるように、コンテナ内の "ゴースト"要素を設定し、その上にvertical-align: middleを使用し、中心に配置する要素の両方にvertical-align: middle 。

CSS

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

<div class="block">
  <div class="centered"></div>
</div>

テキストアラインメントを使用する

最も一般的で最も簡単なタイプのセンタリングは、要素内のテキスト行のセンタリングです。 CSSはこの目的のためにtext-align: centerルールを持っていtext-align: center ：

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

これは、ブロック要素全体をセンタリングするためには機能しません 。 text-alignは、親ブロック要素内のテキストのようなインラインコンテンツのアライメントのみを制御します。

タイポグラフィのセクションでtext-align詳細を参照してください。

別のアイテムとの関連付け

近い要素の高さに基づいてコンテンツをどのように配置するかを見ていきます。

互換性：IE8 +、他のすべての現代のブラウザ。

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

JSFiddleへのリンク

主なポイントは、3つの.thumb 、 .details 、 .position-containerコンテナです。

.position-containerはdisplay: table持って.position-containerなければなりません。
.detailsは実際の幅の設定width: ....とdisplay: table-cell 、 vertical-align: middle持っていなければなりません。
.thumbは残りのスペースをすべて取るようにするにはwidth: 100%する必要があり、 .details幅の影響を受けます。
.thumb中にある画像（画像がある場合）のwidth: 100%にする必要がありますが、比率が正しい場合は必要ありません。

3行のコードで何かを垂直に整列させる

IE11 +でサポート

結果を見る

これらの3行を使用して、実際にすべてを垂直に整列させます。コードを適用するdiv / imageに高さのある親があることを確認してください。

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

div内の画像を垂直に整列する

HTML

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

テーブルレイアウトを使用した水平と垂直のセンタリング

table表示プロパティを使用して子要素を簡単に中央に置くことができます。

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

calc（）を使用すると、

calc（）関数は、ピクセル、パーセンテージなどのさまざまな値を使用して要素が占めるサイズ/位置を計算できる（数学的に）CSS3の新しい構文の一部です。注意： - この関数を使用するときはいつでも、常に2つの値calc(100% - 80px)間のスペースをcalc(100% - 80px)ます。

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

動的高さ要素を垂直に整列する

直感的にCSSを適用しても、望ましい結果が得られません。

vertical-align:middle ブロックレベル要素に vertical-align:middle は適用されません
margin-top:autoおよびmargin-bottom:auto 使用される値はゼロとして計算されます
margin-top:-50% パーセンテージベースの margin-top:-50% マージン値は、包含ブロックの幅に対して計算されます

最も幅広いブラウザサポートのために、ヘルパー要素を使用した回避策：

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

元の質問からjsfiddle 。このアプローチ

動的な高さの要素で動作する
コンテンツの流れを尊重する
従来のブラウザでサポートされています

行の高さを使用する

また、 line-heightを使用して、コンテナ内の1行のテキストを垂直方向にセンタリングすることもできます。

CSS

div {
    height: 200px;
    line-height: 200px;
}

これはかなり醜いですが、 <input />要素の内部では便利です。 line-heightプロパティは、中央揃えされるテキストが1行にまたがる場合にのみ機能します。テキストが複数の行に折り返された場合、結果の出力は中央揃えされません。

高さや幅を気にすることなく縦横にセンタリング

次の方法では、コンテンツをHTML要素に追加し、 その高さや幅を気にすることなく 、水平方向と垂直方向の両方にコンテンツを配置することができます。

外部容器

display: table;必要がありdisplay: table;

内部容器

display: table-cell;必要がありdisplay: table-cell;
vertical-align: middle;なければなりませんvertical-align: middle;
text-align: center;が必要text-align: center;

コンテンツボックス

display: inline-block;必要display: inline-block;
水平方向のテキストの配置を再調整する必要があります。 text-align: left;またはtext-align: right;あなたがテキストを中央に揃えたいのでない限り

デモ

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

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

このフィドルも見てください！

固定サイズのセンタリング

コンテンツのサイズが固定されている場合は、コンテンツの幅と高さの半分を削減するmarginで絶対位置を50％まで使用できます。

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

固定幅のみの水平センタリング

コンテンツの高さが分からない場合でも、要素を水平に配置することができます。

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

固定高さによる垂直センタリング

要素の高さがわかっている場合は、要素を垂直方向に中央に配置できます。

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

余白を使用する：0自動;

margin: 0 auto;を使ってオブジェクトを中央に配置することができますmargin: 0 auto;それらがブロック要素であり、定義された幅を持つ場合。

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

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

結果：

JSFiddleの例：余白付きのオブジェクトのセンタリング：0 auto;

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

CSS
センタリング

サーチ…

CSSトランスフォームの使用

CROSS BROWSER COMPATIBILITY

詳しくは

Flexboxの使用

位置の使用：絶対

ゴースト要素技術（MichałCzernowのハック）

テキストアラインメントを使用する

別のアイテムとの関連付け

3行のコードで何かを垂直に整列させる

div内の画像を垂直に整列する

テーブルレイアウトを使用した水平と垂直のセンタリング

calc（）を使用すると、

動的高さ要素を垂直に整列する

行の高さを使用する

高さや幅を気にすることなく縦横にセンタリング

外部容器

内部容器

コンテンツボックス

デモ

固定サイズのセンタリング

固定幅のみの水平センタリング

固定高さによる垂直センタリング

余白を使用する：0自動;