CSSの上下左右中央寄せについて。

Question

質問です。

今webページを制作しているのですが
ブロック要素を左右中央寄せにした状態で、インライン要素を上下左右中央寄せにするコーディングが全く分からず
困りはてております。

  <div class="nume">
    <div class="baki5">カテゴリ</div>
    </div>

.baki5{
      border-style:dotted;
      border-color:#00FFFF;
      width:1000px;
      height:50px;
      background-color:#000000;
      color:#FFFFFF;
      display:table-cell;
      vertical-align:middle;
      text-align:center;
      margin:auto;
      }
      .nume{
        margin:auto
      }
      .baki6{
        width:100px;
        height:100px;
        background-color:#000000;
        border:none;
        margin:auto;
        margin-top:50px;
      }

この様な感じでコーディングしているのですが
これだと、当然marginが効かないため
ブロックを左右中央にする事が出来ません。

ここから、どの様にコーディングしたら
このインライン要素を上下左右中央にしたまま、ブロックを左右中央に出来るでしょうか？？

お手数ですが
ご教示お願いしたく存じます。

Answer 1

出来ました(T_T)
本当にありがとうございます。(T_T)

まだまだ、勉強不足を痛感致します。

今回はありがとうございました。

Comments

[Chihiro1219]

投稿お役に立てたでしょうか？？
出来たようでよかったですね。

Answer 2

こういうことではないですよね。天地もレスポンシブで中央ということでしょうか？
http://codepen.io/ChihiroTachikawa/pen/LNKOed
html

<section class="text">
  <p>
  
  <div class="nume">
    <div class="baki5">カテゴリ</div>
    </div>
  
  </p>
</section>

CSS

.baki5{
      border-style:dotted;
      border-color:#00FFFF;
      width:1000px;
      height:50px;
      background-color:#000000;
      color:#FFFFFF;
      display:table-cell;
      vertical-align:middle;
      text-align:center;
      margin:auto;
      }
      .nume{
        margin:auto
      }
      .baki6{
        width:100px;
        height:100px;
        background-color:#000000;
        border:none;
        margin:auto;
        margin-top:50px;
      }
.text p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


section {
  display: block;
  max-width: 1000px;
  margin: 0 auto 1em;
  height: auto;
  border-radius: .2em;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

}