web-dev-qa-db-ja.com

画面中央の中央h1

テキストを水平および垂直に中央揃えするにはどうすればよいですか？絶対位置を使用したくないのですが、それを試してみて、他のdivが悪化しています。それを行う別の方法はありますか？

div {
    height: 400px;
    width: 800px;
    background: red;
}
<div>
    <h1>This is title</h1>
</div>
htmlcsstext-align
16
Dina

ディスプレイフレックスを使用すると、その直接のすべての子のフレックスコンテキストが有効になり、フレックスの方向によって主軸が確立されるため、フレックスアイテムがフレックスコンテナに配置される方向が定義されます。

div{
  height: 400px;
  width: 800px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
10
elreeda

これを行うだけで、すべてのブラウザで動作します：

div{
     height: 400px;
     width: 800px;
     background: red;
     line-height: 400px;
     text-align: center;
}

line-heightプロパティは、行の高さ（垂直方向の中央）を指定し、text-align:center水平方向の中央に直接配置します。

4
Kris
<div>
  <style>
div {
  position: fixed;
  top: 50%;
  left: 50%;
}</style>
<h1>This is title</h1>
</div>

position: fixedを使用すると、位置を固定値に設定し、topとleftを両方とも50%に設定すると、画面の中央に表示されます。

幸運のコーディング！

詳細は次のとおりです。 https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

1
J_from_Holland
.container {
    display: table;
}
.centered {
    display: table-cell;
      height: 400px;
      width: 800px;
      background: red;
    text-align: center;
    vertical-align: middle;
    }
<div class="container">
<div class="centered">
  <h1>This is title</h1>
</div>
</div>
0
Steve Harris