6060


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


CC BY-SA 3.0
2015-02-06T05:56:28.730
6057
2017-08-23T01:29:00.270
450
question
html css
CSSで要素内のテキストを上下左右の中央揃えにしたい


中のテキストを`inline-block`にしたら、下記のように`text-align`が使えるようになります：

[code]

    #outerdiv {
      width: 100%;
      text-align: center;
    }
    
    #centeredtext {
      display: inline-block;
    }
    
[/code]


CC BY-SA 3.0
2015-02-06T06:02:21.130
6059
2015-02-06T06:02:21.130
7851
6057
answer


`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]


CC BY-SA 3.0
2015-02-06T06:06:22.117
6060
2015-02-06T06:28:35.267
2015-02-06T06:28:35.267
7214
7214
6057
answer


divを親要素、pを子要素として、CSSを以下のように記述すると、  
親要素の大きさに関係なく上下左右の中央になるのでは。

[code]

    div p {
      display: block;
      position: relative;
      top: 50%;
      text-align: center;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
[/code]

ここらが参考になると思います。  
<http://coliss.com/articles/build-websites/operation/css/css-vertical-align-
anything-by-sebastian.html>


CC BY-SA 3.0
2016-02-21T06:36:18.847
22344
2016-02-21T06:59:11.457
2016-02-21T06:59:11.457
7837
14486
6057
answer

[code]

    <!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <div style="width: 200px; height: 200px; border: 1px solid black; text-align: center; line-height: 200px">
          centered text
        </div>
      </body>
    </html>
    
[/code]

line-height指定でどうでしょうか。


CC BY-SA 3.0
2017-08-23T01:29:00.270
37424
2017-08-23T01:29:00.270
25003
6057
answer