css、display:table-cell;が全く反映されません。

cssのdisplay:table-cell;とvertical-align:middle;を使って
ボックスの中の要素を上下左右中央に持ってこさせようとしているのですが、table-cellが全く効きません。

以下コードです。

<div class="aaa">
    <div class="bbb">カテゴリ</div>
    </div>

.bbb{
      width:1000px;
      height:50px;
      background-color:#000000;
      color:#FFFFFF;
      display:table-cell;
      vertical-align:middle;
      text-align:center;
      position:absolute;
      margin:auto;
      right:0;
      left:0;
      }
      .aaa{
        position:relative;
      }

この様な感じでコーディングしているのですが、全くvertical-align:middle;が反映されません。
ちなみに、理由は分かりませんが、どうもこのコーディングですと、display:table-cell;がそもそも
効いてないような気がします。といいますのも、私は、Atomをテキストエディターで使用しているのですが
何故かコーディングをしているとこの、display:table-cell:の“table-cell”の構文だけが暗くなっていました。
Atomでコーディング中の構文が暗くなる場合はそのコードに対してなにか記述ミスがあり、そのコードが反映されてない場合に
起こるみたいなので、原因を探してみたのですが、原因が全く分かりません。

どなたか、ご教示お願い致します。

行動規範の内容に同意します

回答2件

.aaa自体に特別色とか線とかのデザインスタイルがついていないなら、

CSS
1.aaa {
2  display:table;
3  width: 1000px;
4  margin: auto;
5}

とすれば中身のtable-cellのボックスごと左右にセンターになりますよ。
（別にdisplay:blockのままでも良いのですが、子要素がtable-cellなので直近の親要素をdisplay:tableにしておいた方が仮想テーブルとしては理想的かなと思いまして。）

ちなみに.aaaは例えば横100%とかで必要なのであれば、
.aaaと.bbbの間にもうひとつ.ccc等の枠を増やし、それをdisplay:table
としてmargin:autoすれば良いかと。

投稿2016/05/20 04:30

編集2016/05/20 04:30

aKusano

総合スコア3763

ベストアンサー

次の三つを消してください。

CSS
1position:absolute;
2right:0;
3left:0;
4```position:absolute;とdisplay:table-cell;が共存できないようです。
5
6Flexible Box (display: flex;) を使うと解決できそうな気がします。
7
8【テキストの縦方向の中央揃えについて - Qiita】
9[http://qiita.com/Shinji-m/items/69a392685699f3ba95fb#flexible-boxを使う](http://qiita.com/Shinji-m/items/69a392685699f3ba95fb#flexible-box%E3%82%92%E4%BD%BF%E3%81%86)
10