縦横に<div>をページの中央に配置する最善の方法は？
垂直方向と水平方向の両方で<div>要素をページの中央に配置する最良の方法は？
私はmargin-left: auto; margin-right: auto;が水平方向を中心にすることを知っていますが、垂直方向にそれを行うための最良の方法は何ですか？
最も柔軟で柔軟な方法
このデモの主なトリックは、上から下に行く要素の通常の流れで、margin-top: autoがゼロに設定されることです。ただし、絶対位置の要素は、空き領域の分配に関して同じように機能し、同様に、指定されたtopおよび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>OPがこの質問をしてもこれがうまくいかなかったとしても、少なくとも最近のブラウザでは display：flex または pseudo classes を使用するのが最善の解決策だと思います。
次の例で例を見ることができます フィドル 。これが 更新されたフィドル です。
疑似クラス の場合、例は次のようになります。
.centerPseudo {
display:inline-block;
text-align:center;
}
.centerPseudo::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
width:0px;
}
css-tricks および _ mdn _ によると、 display：flex の使用法は次のとおりです。
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
Flexには他にも利用可能な属性があります。これらについては、上記のリンクで詳細な例とともに説明します。
CSS 3をサポートしていない古いブラウザをサポートする必要がある場合は、おそらくJavaScriptまたは他の回答で示されている固定幅/高さの解決策を使用する必要があります。
この手法の単純さは驚くべきものです。
（ただし、この方法には意味がありますが、コンテンツの残りの部分の流れに関係なく要素を中央に配置するだけでよい場合は、問題ありません。慎重に使用してください）
マークアップ：
<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 {
background:red;
position:absolute;
color:#fff;
top:50%;
left:50%;
padding:15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
これは要素を水平方向と垂直方向にも中央に配置します。マイナスのマージンはなく、変革の力だけです。また、IE8についてはもう忘れておくべきですか。
私はtranslateを使います。
最初にdivの左上隅をページの中央に配置します（position: fixed; top: 50%; left: 50%を使用）。それからtranslateはそれをdivの高さの50％上に移動してページの垂直方向の中央に配置します。最後に、translateはdivを幅の50％だけ右に移動して水平方向の中央に配置します。
実際には、この方法は他の多くの方法よりも優れていると思います。なぜなら、それは親要素の変更を必要としないからです。
いくつかのシナリオでは、translateがtranslate3dよりも優れています。これは、より多くのブラウザでサポートされているためです。 http://caniuse.com/#search=translate
まとめると、このメソッドは、Chromeのすべてのバージョン、Firefox 3.5以降、Opera 11.5以降、すべてのバージョンのSafari、IE 9以降、およびEdgeでサポートされています。
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 20px;
background-color: cyan;
border: darkgreen 5px solid;
padding: 5px;
z-index: 100;
}
table {
position: absolute;
top: 0;
left: 0;
}
td {
position: relative;
top: 0;
left: 0;
}<table>
<tr>
<td>
<div class="centered">This div<br />is centered</div>
<p>
Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
</p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
</p>
</td>
</tr>
</table>ただし、この方法では、ページがスクロールされている間、このdivは1つの場所に留まります。これはあなたが望むものかもしれませんが、そうでなければ、別の方法があります。
今度は、同じCSSを試してみて、positionをabsoluteに設定すると、絶対位置を持つ最後の親の中心になります。
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 20px;
background-color: cyan;
border: darkgreen 5px solid;
padding: 5px;
z-index: 100;
}
table {
position: absolute;
top: 0;
left: 0;
}
td {
position: relative;
top: 0;
left: 0;
}<table>
<tr>
<td>
<div class="centered">This div<br />is centered</div>
<p>
Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
</p>
</td>
<td>
<p>
Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
</p>
</td>
</tr>
</table>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-horizontally-and.html
フレックスディスプレイを活用したシンプルなソリューション
<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は画面全体を占めており、ディスプレイを持っています：flexはすべてのブラウザに設定されています。 2番目のdiv（中央のdiv）は表示を利用します。flex divここで、margin：autoは見事に機能します。
注 IE11 +との互換性。 （IE10 w /プレフィックス）。
新しいブラウザ（IE10 +）を見ているなら、
それから、中心にdivを配置するためにtransformプロパティを利用することができます。
<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の位置を relative と指定するだけで、このCSSが自分のdivに対して機能し始めます。
使い方：
Leftとtopを50％に指定すると、divはページの右下の四分の一になり、左上端はページの中央に固定されます。これは、left/topプロパティ（％で指定されている場合）が外側のdiv（あなたの場合はwindow）の高さに基づいて計算されるためです。
しかしtransformは要素の高さ/幅を使って平行移動を決定します。したがってdivは負の値で与えられるので左（50％の幅）と上（50％の高さ）に移動し、ページの中央に合わせます。
古いブラウザをサポートする必要がある場合（そしてIE9も含めて申し訳ありませんが）、テーブルセルは最も一般的な方法です。
縦と横の両方にボックスを中央揃えするための私の好ましい方法は、次のテクニックです。
外側の容器
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>this Fiddle ！も参照してください。
編集
はい、私はあなたがtransform: translate(-50%, -50%);またはtransform: translate3d(-50%,-50%, 0);で多かれ少なかれ同じ柔軟性を達成することができることを私は知っています、私が提案する技術ははるかに良いブラウザサポートを持っています。 -webkit、-msまたは-mozのようなブラウザ接頭辞があっても、transformはまったく同じブラウザサポートを提供しません。
そのため、古いブラウザ（IE9以下など）を気にする場合は、位置指定にtransformを使用しないでください。
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
説明：
絶対位置を指定してください（親は相対位置を持つべきです）。次に、左上隅が中央に移動します。あなたはまだ幅/高さを知らないので、あなたは中央に相対的に位置を変換するのにcss変換を使います。 translate（-50％、-50％）は、左上隅のxとyの位置を幅と高さの50％縮小します。
これは私がしばらく前に書いたスクリプトです（ それは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();
};
これはdivを水平方向と垂直方向の両方に中央揃えするのに最適なコードです。
div
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}私はパーティーに遅刻していることを知っていますが、これは未知の次元を持つ親の内側に未知の次元を持つ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>
デモ：
この demo をチェックしてください。
私の考えではフレックスボックスを使う：
#parent {
display: flex;
justify-content: center;
align-items: center;
}<div id="parent">
<div id="child">Hello World!</div>
</div>子要素を縦方向と横方向の中央に配置するために使用する必要があるCSSプロパティは3つだけです。 display: center;フレックスボックス表示を有効にすることでメインパートを行い、justify-content: center;は子要素を垂直方向に中央align-items: center;は水平方向に中央揃えにします。最良の結果を得るために、いくつか追加のスタイルを追加します。
#parent {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
background: yellow;
}
#child {
width: 100px;
height: 100px;
background: silver;
}<div id="parent">
<div id="child">Hello World!</div>
</div>Flex-boxについてもっと知りたい場合は、 W3Schools 、 _ mdn _ 、または CSS-Tricks にアクセスしてください。
実際には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以上（この秋にはwin xpと共に死亡したため、IE 8については気にしないでください。ありがとうございました。）
div {
border-style: solid;
position: fixed;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
幅と高さを基準にして左右を調整します。つまり、（100％ - 80％）/ 2 = 10％です。
CSSグリッドを使った2018年の方法：
.parent{
display: grid;
place-items: center center;
}
ブラウザのサポートを確認してください。 Caniuse はChrome 57、FF 52、Opera 44、Safari 10.1、Edge 16で動作することを示しています。私は自分自身を確認しませんでした。
下記の抜粋を参照してください。
.parent{
display: grid;
place-items: center center;
/*place-items is a shorthand for align-items and justify-items*/
height: 200px;
border: 1px solid black;
background: gainsboro;
}
.child{
background: white;
}<div class="parent">
<div class="child">Centered!</div>
</div>ここ からのもう一つの方法（防弾）を 'display：table'ルールを利用して：
Markup
<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;
}
解決策
たった2行のCSSを使用して、Flexboxの魔法の力を活用する
.parent { display: flex; }
.child { margin: auto }
私はLaravelのビューファイルを見ていましたが、それらがテキストを完全に中央に配置していることに気付きました。私はすぐにこの質問について思い出しました。これは彼らがやった方法です：
<html>
<head>
<title>Laravel</title>
<!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->
<style>
.container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.inside {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="inside">This text is centered</div>
</div>
</body>
結果はこんな感じです：
この解決策は私のために働いた
.middleDiv{
position : absolute;
height : 90%;
bottom: 5%;
}
（または高さ：70％/底：15％
高さ：40％/下：30％...）
私は遅すぎますが、これはとても簡単で簡単です。ページ中央は常に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>代わりの答えは 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;
}
私はこれがまだ言及されていないことに驚きますが、これをする最も簡単な方法はビューポートサイズを使って高さ、マージン（そして望むならば幅）を設定することでしょう。
ご存知かもしれませんが、ビューポートの全高= 100vhです。
あなたのコンテナのheightが画面の60％（60vh）を占めるようにしたいとすると、残りの部分（40vh）を上下の余白の間で均等に分割して、要素が自動的に中央に配置されるようにできます。 。margin-leftおよびmargin-rightをautoに設定すると、コンテナが水平方向の中央に配置されます。
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}<div class="container">
</div>あなたがあなたの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>Parentにdisplay:gridを使用し、margin:autoをcentrerd要素に設定するとうまくいきます。
以下の抜粋を参照してください。
html,body {
width :100%;
height:100%;
margin:0;
padding:0;
}
.container {
display:grid;
height:90%;
background-color:blue;
}
.content {
margin:auto;
color:white;
}<div class="container">
<div class="content"> cented div here</div>
</div>皆さんがJQueryを使っているのなら、.position()を使ってこれを行うことができます。
<div class="positionthis"></div>
CSS
.positionthis {
width:100px;
height:100px;
position: absolute;
background:blue;
}
Javascript（JQuery）
$(document).ready(function () {
$('.positionthis').position({
of: $(document),
my: 'center center',
at: 'center center',
collision: 'flip flip'
});
});
JSFiddle： http://jsfiddle.net/vx9gV/ /
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}<body>
<div>Div to be aligned vertically</div>
</body>位置：絶対 ボディドキュメントのdiv
絶対位置を持つ要素。最も近い位置にある祖先に相対的な位置 相対位置 ビューポート（bodyタグ）への固定）.
しかしながら;絶対配置要素に配置先祖がない場合は、ドキュメント本文を使用して、ページのスクロールとともに移動します。
source： CSSの位置
ブラウザはそれをサポートしていますか、翻訳を使用することは強力です。
position: absolute;
background-color: red;
width: 70%;
height: 30%;
/* The translate % is relative to the size of the div and not the container*/
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);
垂直方向だけでなく水平方向の中央揃え要素には、次のCSSプロパティを使用してください。これは私にとってはうまくいきました。
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
margin: auto;
width: 100px;
height: 100px;
}
返信が遅くなってすみません
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
margin-topとmargin-leftはあなたのdivボックスのサイズに一致するはずです