左揃えのテキストをページの中央に置きたい

テキストをページの真ん中（縦中央）に持ってきたいとき
text-align:center
を使えば簡単

しかしこれはテキストそのものが
中央揃えになってしまう

テキストのボックスは中央に持ってきても
テキストそのものは左揃えにしたい
そんなときが結構あります

HTML

<div class="text_box">
<p>テキストの中身テキストの中身テキストの中身</p>
</div>

CSS

.text_box{
     text-align:center;
}

.text_box p{
     display:inline-block;
     text-align:left;
}

まずテキストの入ったボックス（親要素）の中身をページ中央に置きます
その中の本文pタグをtext-align:left;にすると
親要素のtext-align:center;が打ち消されページの左端に行ってしまいます
そこでpタグをinline-block要素にすることで
テキストは左寄せにしたまま中央に置くことができます
（text-alignは指定したブロックの中のインライン要素に効くため）