CSSで要素内のテキストを上下左右の中央揃えにしたい


下図のように、`div`要素内のテキストを上下左右の中央揃えにしたいです。  
どのようなCSSを書けば良いのでしょうか？  
![上下左右の中央揃え](https://i.stack.imgur.com/idvNI.png)  
`width:200px; height:200px;`と書いたのは一例です。  
特にこの大きさ自体に意味があるわけではありませんが、要素の大きさはCSSで指定したいのです。




`display: table-cell`でできます。

[code]

    div.center {
        height: 150px;
        width: 250px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        background-color: #88dd88;
    }
[/code]

[code]

    <div class="center">text center</div>
[/code]




`display: table-cell`でできます。

[code]

    div.center {
        height: 150px;
        width: 250px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        background-color: #88dd88;
    }
[/code]

[code]

    <div class="center">text center</div>
[/code]

