div内のテキストを垂直方向に配置するにはどうすればよいですか？

テキストをdivに揃える最も効果的な方法を見つけようとしています。私はいくつかのことを試しましたが、どれもうまくいかないようです。

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSSの垂直方向の中央揃え
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

記事の要約：

CSS 2ブラウザーの場合、display:table/ display:table-cellを使用してコンテンツを中央に配置できます。

JSFiddleにもサンプルがあります。

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

古いブラウザー（Internet Explorer 6/7）のハックをスタイルにマージして#、新しいブラウザーからスタイルを非表示にすることでそれを可能にします。

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

line-height属性を追加する必要があり、その属性はの高さに一致する必要がありdivます。あなたの場合：

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

実際、おそらくheight属性を完全に削除することができます。

ただし、これは1行のテキストに対してのみ機能するため、注意が必要です。

ここに素晴らしいリソースがあります

http://howtocenterincss.com/から：

CSSの中央揃えはお尻の痛みです。さまざまな要因に応じて、それを行うには無数の方法があるようです。これはそれらを統合し、それぞれの状況に必要なコードを提供します。

フレックスボックスの使用

この投稿を最新の技術で最新に保つことに合わせて、Flexboxを使用して何かを中心に配置するはるかに簡単な方法を次に示します。FlexboxはInternet Explorer 9以下ではサポートされていません。

ここにいくつかの素晴らしいリソースがあります：

• Flexboxのガイド
• Flexboxを使用した要素の中央揃え
• FlexboxのInternet Explorer 10構文
• Flexboxのサポート

ブラウザプレフィックス付きのJSFiddle

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

別の解決策

これはzerosixthreeからのもので、6行のCSSで何でも中央に配置できます

この方法は、Internet Explorer 8以前ではサポートされていません。

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

前の答え

マークされた回答のリンクが少し古くなっているので便利な、シンプルでクロスブラウザのアプローチ。

JavaScriptまたはCSSの行の高さに頼らずに、順序なしリストとdivの両方でテキストを垂直方向および水平方向に中央揃えにする方法。テキストがいくらあっても、特別なクラスを特定のリストまたはdivに適用する必要はありません（コードはそれぞれ同じです）。これは、Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera、Safari を含むすべての主要なブラウザーで動作します。最近のブラウザーにはないCSSの制限のために、2つの特別なスタイルシート（Internet Explorer 7用とInternet Explorer 6用）があります。

Andy Howard-順序付けられていないリストまたはdivでテキストを垂直方向および水平方向に中央揃えにする方法

私が最後に取り組んだプロジェクトではInternet Explorer 7/6をあまり気にしなかったので、少し削ったバージョンを使用しました（つまり、Internet Explorer 7および6で機能するものを削除しました）。それは他の誰かに役立つかもしれません...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

で簡単display: flexです。次の方法では、テキストがdiv垂直方向に中央揃えになります。

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

必要に応じて、水平：

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

必要なブラウザのバージョンを確認する必要があります。古いバージョンでは、コードは機能しません。

以下を使用して、ランダム要素を簡単に垂直方向に中央揃えします。

HTML：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS：

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

これにより、myのテキストがdiv高さ200pxのアウターの垂直方向の真ん中の中央に配置されdivます。ブラウザーで-webkit-これを機能させるには、ブラウザーのプレフィックス（私の場合など）を使用する必要がある場合があります。

これはテキストだけでなく、他の要素でも機能します。

これを行うには、表示を 'table-cell'に設定し、vertical-align: middle;：

    {
        display: table-cell;
        vertical-align: middle;
    }

しかし、許可なくhttp://www.w3schools.com/cssref/pr_class_display.aspからコピーしたこの抜粋によると、これはInternet Explorerのすべてのバージョンでサポートされていません。

注：「inline-table」、「table」、「table-caption」、「table-cell」、「table-column」、「table-column-group」、「table-row」、「table-row」の値-group」および「inherit」は、Internet Explorer 7以前ではサポートされていません。Internet Explorer 8には！DOCTYPEが必要です。Internet Explorer 9は値をサポートしています。

次の表は、http：//www.w3schools.com/cssref/pr_class_display.aspからも許可される表示値を示しています。

最近は（Internet Explorer 6-7-8はもう必要ありません）display: tableこの問題（またはdisplay: flex）にはCSS を使用します。

古いブラウザの場合：

テーブル：

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

フレックス：

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

これは、（実際には）この問題に対する私のお気に入りのソリューションです（シンプルで非常によくサポートされているブラウザ）。

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

これを試して、親divを追加してください：

display: flex;
align-items: center;

以下は、1行のテキストに最適なソリューションです。

また、行数がわかっている場合は、複数行のテキストに対しても調整できます。

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

こちらがJSFiddleです。

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

フレックスボックスを使用して、中央のテキストをdiv内で垂直方向に揃えることができます。

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

詳細については、『Flexboxの完全ガイド』を参照してください。

この簡単な解決策を確認してください：

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

table / table-cellに頼らずにコンテンツを垂直方向に揃える簡単な方法があります。

http://jsfiddle.net/bBW5w/1/

その中に、コンテナの高さ全体を想定する非表示（width = 0）divを追加しました。

Internet ExplorerおよびFirefox（最新バージョン）で動作するようです。他のブラウザでは確認していません

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

そしてもちろんCSS：

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

これは、私が見つけた最もクリーンなソリューション（Internet Explorer 9以降）でありtransform-style、他の回答が省略していたことを使用して、「。5ピクセルでオフ」の問題の修正を追加します。

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

出典：わずか3行のCSSで何でも垂直に配置

値を知らないという要素に対する簡単な解決策：

HTML

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

CSS

.main {
    position: relative
}

.center {
    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%);
}

Adam Tomatの回答によると、div内のテキストを揃えるためのJSFiddleの 例が用意されています。

<div class="cells-block">    
    text<br/>in the block   
</div>

CSSでdisplay：flexを使用する：

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

別の例とブログ投稿でのいくつかの説明。

grid-itemのマージン自動。

Flexboxと同様に、grid-itemにmargin autoを適用すると、両方の軸に中央揃えになります。

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexboxは完璧に機能し、親div内の複数の要素を水平方向および垂直方向の中央に配置しました。

HTMLコード：

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSSコード：
以下のコードは、列のparent-div内のすべての要素を積み重ね、要素を水平および垂直に中央揃えにします。child-divを使用して、2つのAnchor要素を同じ行（行）に保持しました。child-divを使用しない場合、3つの要素（アンカー、アンカー、段落）はすべて、親divの列内で互いに積み重ねられます。ここでは、child-divのみがparent-div列内にスタックされています。

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

使用する：

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

このトリックでは、中央に「左：0」を追加して左揃えにしたくない場合は、何でも揃えることができます。

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

フレックスを使用する場合は、ブラウザのレンダリングの違いに注意してください。

これはChromeとInternet Explorerの両方でうまく機能します。

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Chromeでのみ機能する次のものと比較してください。

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

これは、CSSで使用divするdivパターンのの別のバリエーションですcalc()。

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

これは機能します。

• position:absolutediv内の正確な配置のためにdiv
• に設定したので、インナーの高さがわかります。div20px
• calc(50% - 10px)以下のための半分の高さ- 50％の内側をセンタリングしますdiv

これはうまくいきます：

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

サス

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

画像タグ<mat-icon>（フォント）なしとあり。

うーん、明らかにこれを解決する方法はたくさんあります。

しかし、私は<div>それを絶対的にheight:100%（実際にはtop:0;bottom:0、固定幅）配置し、display:table-cellテキストを垂直方向に中央揃えするように機能しませんでした。私のソリューションには内部スパン要素が必要でしたが、他のソリューションの多くにも同様に必要なので、追加することもできます。

私のコンテナはa .labelで、数字を垂直方向の中央に配置したいと思います。絶対に配置しtop:50%てセッティングしてやったline-height:0

<div class="label"><span>1.</span></div>

そして、CSSは次のとおりです。

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

実際に見る：http : //jsfiddle.net/jcward/7gMLx/

cssを使用できますflexbox。

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSSグリッドを使用してそれを行いました：

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

テーブル要素を埋め込むようにしてください。

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

divの中央にコンテンツまたはイメージを表示するためのいくつかのトリックがあります。いくつかの答えは本当にいいです、そして私もこれらに完全に同意します。

CSSでの絶対水平および垂直センタリング

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizo​​ntal-and-vertical-centering-in-css/

例には、10を超えるテクニックがあります。今あなたが好むのはあなた次第です。

間違いなく、display:table; display:table-Cellより良いトリックです。

いくつかの良いトリックは次のとおりです：

トリック1-使用 display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

CSSコード

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

トリック2-使用 display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSSコード

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

トリック3-使用 position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS：

.vertical {
   display: table-caption;
}

このクラスを、垂直方向に整列させたいものを含む要素に追加します

min-heightプロパティで使用する必要がある場合は、次のCSSを追加する必要があります。

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}