よくある質問：左右真ん中にしたい／上下真ん中にしたい／テーブルのデザイン／

画面の真ん中に表示したい

・左右の真ん中表示 　

実動のサンプル
 HTML 

<div class="main">
<div>
<h2>ブロックレベル要素をセンタリング</h2>
<p>ブロックレベル要素</p>
</div>
</div>


 CSS  
.main {width: 100%;
　　　border: 1px solid #000;}

.main div {
width: 80%; /* 一つ外の箱の横幅を100%とする時のこの枠の横幅 */

border: 1px solid #FF0000; /* わかりやすくするために枠色を赤くする */

margin: 0 auto; /* 中央揃えのコードは上下0 左右auto */

}

・上下の真ん中表示
 HTML 

<div class="parent"> <p class="child">天地左右の中央に配置</p> </div>

CSS

 .parent {   position: relative; } 

.child {   position: absolute;  

　　　　 top: 50%;   left: 50%;  

　　　　 -webkit-transform: translate(-50%, -50%); /* Safari用 */   

　　　　 transform: translate(-50%, -50%); } 

この上下の真ん中表示の方法は周りの箱の構成によって

上記のような書き方が不可能な場合他の方法も存在します。

↓

参考

• W3C: Centering Things
• Centering in CSS
• The Simplest Way To Center Elements Vertically And Horizontally
• たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）

表のデザイン
(テーブルレイアウト)
https://liginc.co.jp/web/html-css/html/86739

table専門の参考ページ5つ

• CSS3を使って美しく装飾されたテーブルの作り方｜Webpark
  http://weboook.blog22.fc2.com/blog-entry-329.html
  CSS3でのtableの作り方を、見た目とソースから解説してあります。
• Tableのデザインまとめ | DesignWalker
  http://www.designwalker.com/2009/01/table.html
  日本はもちろん海外のtable専門サイトなども紹介されていて、見応え十分です。
• テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScript Room
  http://phpjavascriptroom.com/?t=css&p=cssdesign_table
  使いやすいtableのサンプル画像と設置用のソースがあってとても親切です。
• TABLE（テーブル）のデザイン・CSSの参考になるサイト・記事をまとめてみた[シンプルからかっこいい系] ・ 気になる備忘録
  http://peacepopo.net/blog-entry-122.html
  CSSテクニック系・角丸テーブル系・海外系など、カテゴライズされていて便利です。
• レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
  http://design-spice.com/2012/11/01/responsive-table/
  この時代だからこそ、押さえておきたい！
  タブレットやスマートフォンなどに対応する技が紹介されています。