37

親 div の高さの 100% である div を使用しています。

div には 1 行のテキストのみが含まれます。

div の高さを固定することはできません。

だから私の質問はです。

テキスト行を垂直方向に中央揃えにするにはどうすればよいですか?

私は使用してみました：

display: table-cell;  
line-height:200%;

重要な場合、div は絶対に配置されます。

現在の CSS

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}
4

13 に答える 13

39

それを行うための最良かつ最も簡単な方法 (現在2015 年2020 年) は、flexbox を使用することです。

.parent-selector {
    display: flex;
    align-items: center;
}

それだけです:D

この実例をチェックしてください:

div {
    border: 1px solid red;
    height: 150px;
    width: 350px;
    justify-content: center;

    /* Actual code */
    display: flex;
    align-items: center;
}
<div>
    <p>Hola</p>
</div>

古い回答: display: table-cell; も指定する場合、vertical-align: middle を使用できます。

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

作業例:

div {
  border: 1px solid red;
  height: 150px;
  width: 350px;
  text-align: center;
  
  /* Actual code */
  display: table-cell;
  vertical-align: middle;
}
<div>
    <p>Hola</p>
</div>

うまくいかない場合は、親をdisplay: table;次のように設定してみてください。

.parent-selector {
    display: table;
}

編集:この方法と、この質問で説明されているすべての方法が、この他の質問にあります: CSS でテキストを垂直方向に中央揃えするにはどうすればよいですか?

于 2011-01-20T23:10:11.783 に答える
28

この回答はもはや最良の回答ではありません...代わりに以下のフレックスボックスの回答を参照してください!

完全に中央に配置するには（デビッドの回答で述べたように）、負の上マージンを追加する必要があります。1行のテキストしかないことがわかっている（または強制する）場合は、次を使用できます。

margin-top: -0.5em;

例えば：

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​

最初に受け入れられた回答は、テキストの中央で垂直方向の中央に配置されません (テキストの上部に基づいて中央に配置されます)。したがって、親の背があまり高くない場合は、中央に表示されません。次に例を示します。

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
}​ 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​
于 2012-11-07T17:05:18.817 に答える
8

これを試してみてくださいhttp://jsfiddle.net/Husamuddin/ByNa3/
それは私、 css でうまく動作します 

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

そしてhtml 

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>
于 2013-11-28T16:04:12.883 に答える
6

絶対に配置されているので、top：50％を使用して中央に垂直に配置できます。

しかし、その後、ページが希望よりも大きくなるという問題が発生します。そのためには、オーバーフローを使用できます：親divに対して非表示。これは私が同じ効果を作成するために使用したものです：

CSS：

div.parent {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
div.parent div.absolute {
    position: absolute;
    top: 50%;
    height: 300px;
}

HTML：

<div class="parent">
    <div class="absolute">This is vertically center aligned</div>
</div>
于 2011-01-20T23:22:21.977 に答える
3

この質問はかなり古いですが、垂直方向に中央揃えする必要がある単一行と複数行の両方で機能するソリューションを次に示します (デモの css に見られるように、垂直方向と水平方向の両方に簡単に中央揃えできます。

HTML

<div class="parent">
    <div class="child">Text that needs to be vertically centered</div>
</div>


CSS

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

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
于 2014-08-15T08:37:10.960 に答える
1

次のようなテーブルでコンテンツをラップするだけです。

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><
于 2012-03-13T17:36:04.780 に答える
1

top:50%テキストの高さがわかっている場合は、との組み合わせを使用できますmargin-top:-x px 。x はテキストの高さの半分です。

作業例: http://jsfiddle.net/Qy4yy/

于 2011-01-21T00:13:53.940 に答える
0

line-height:1em; を試しましたか? それが垂直方向の中央に配置する方法であることを思い出します。

于 2011-01-20T23:07:49.057 に答える
0

vertical-align: middle を試しましたか ???

vertical-align の詳細については、http ://www.w3schools.com/css/pr_pos_vertical-align.asp を参照してください。

于 2011-01-20T23:08:36.767 に答える
0

垂直方向の位置合わせ、絶対位置と組み合わせた動的な高さは、数行の JS (jQuery など) なしでは不可能ないくつかの特別な条件を除きます。(場合によってはバックエンド コードで解決できるか、min-height を適切なトップまたはマージン スタイルと組み合わせて解決できますが、完全ではありません)

私は主に、フロート内にある何かに関連して何かが「ポップアップ」することになっている場合にのみ絶対位置を使用します。これが最良の使用方法だと思います。

気分を害することはありませんが、ここでのほとんどの回答は的外れです。

于 2011-01-20T23:20:36.703 に答える
0

行の高さを div の高さと同じに設定すると、テキストが中央に配置されます。行が 1 つの場合にのみ機能します。(ボタンなど)。

于 2013-04-05T12:10:28.090 に答える