フラスコブーツストラップを使用して、見出しテキストを縦と横に配置する方法

Question

ページの途中で見出しのテキストを表示するにはどうすればよいですか？私はflask-bootstrapを使用しています。自分のCSSスタイルでカスタマイズしたいと思います。

HTML

{% extends "bootstrap/base.html" %} 

{% block head %} 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
{{ super() }} 
<!-- My ccs style --> 
<link rel="stylesheet" href="{{url_for('.static', filename='start.css')}}"> 
<!-- Custom Fonts --> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font- awesome.css" rel="stylesheet"> 
{% endblock %} 

{% block content %} 

<header class="header"> 
    <div class="text-vertical-center"> 
     <h1>Welcome to my Site</h1> 
     <h3>My portfolio</h3> 
     <br> 
     <a href="#" class="btn btn-dark btn-lg">Next Site</a> 
    </div>  
</header> 

{% endblock %} 

CSS

html, 
body { 
    width: 100%; 
    height: 100%; 
} 

body { 
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; 
} 

.text-vertical-center { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

.text-vertical-center h1 { 
    margin: 0; 
    padding: 0; 
    font-size: 4.5em; 
    font-weight: 700; 
} 

.btn-dark { 
    border-radius: 4; 
    color: #fff; 
    background-color: rgba(0,0,0,0.4); 
} 

私が間違って何をやっている：

ここに私のサンプルコードですか？ The result of the code in Chrome

Answer 1

あなたは2D Transformsでposition: absoluteを使用することができます。

*小さいビューポートではメディアクエリを使用することができますが、正しく動作する必要はありません。

実施例：あなたのコードで

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 
.header .text-vertical-center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    background: red; 
 
} 
 
.header .text-vertical-center h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 4.5em; 
 
    font-weight: 700; 
 
} 
 
.header .btn-dark { 
 
    border-radius: 4; 
 
    color: #fff; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 
@media (max-width: 800px) { 
 
    .header .text-vertical-center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<header class="header"> 
 
    <div class="text-vertical-center"> 
 
    <h1>Welcome to my Site</h1> 
 
    <h3>My portfolio</h3> 
 
    <br> 
 
    <a href="#" class="btn btn-dark btn-lg">Next Site</a> 
 
    </div> 
 
</header>

Answer 2

このようにdisplay: table-cell;を使用するには、親要素をdisplay: table;に設定する必要があります。この後はうまくいくはずです。

.header { 
display: table; 
} 

Answer 3

これはあなたに役立つと思います。あなたが（縦横とも）ページの中央にコンテンツを配置しようとしている場合

.text-vertical-center{ 
height: 100px; 
width: 100px; 
background-color: #036; 
left: 0; 
margin: auto; 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
} 

<div class="text-vertical-center"> 
    <h1>Welcome to my Site</h1> 
    <h3>My portfolio</h3> 
    <br> 
    <a href="#" class="btn btn-dark btn-lg">Next Site</a> 
</div>