So zentrieren Sie einen Überschriftstext vertikal und horizontal mit dem flask-bootstrap

Question

Wie kann ich einen Überschriftstext in der Mitte einer Seite einfügen? Ich benutze Kolben-Bootstrap und ich möchte es mit meinem eigenen CSS-Stil anpassen.

Hier ist mein Beispielcode:

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); 
} 

Was mache ich falsch? The result of the code in Chrome

Answer 1

Wenn Sie versuchen, den Inhalt zu platzieren (sowohl vertikal als auch horizontal) Mitte der Seite können Sie position: absolute mit 2D Transforms verwenden.

* Sie können eine Medienabfrage für kleinere Ansichtsfenster verwenden, aber es ist nicht erforderlich, dass sie ordnungsgemäß funktioniert.

Arbeitsbeispiel:

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

Um display: table-cell; auf diese Weise zu verwenden, muss das übergeordnete Element zu display: table; eingestellt werden. Danach sollte es funktionieren.

.header { 
display: table; 
} 

Answer 3

Ich denke, das wird Ihnen helfen.

.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>