仅以CSS居中

Question

此问题涉及垂直居中。代码已经完成了横向对中，并且效果很好。我需要垂直。对不起，我把那部分留下了。对我来说这是显而易见的问题，因为这就是我的脑海中。有助于写它，因为人们不在我的脑海中，幸好......

我一直在这一整天，我已经尝试了我在这里找到的解决方案，但它们不起作用。我很确定这是因为我没有提供部分元素的div高度，但我不想这样做，除非这样做是不可能的，除非这样做...

这两个空白div只是为了创建一个不错的边框效果。

我知道如何用jQuery轻松完成此操作。我希望它在CSS，后来jQuery将进行修改，以增加影响，但我不希望启动与Java jQuery的，如果可能的话我希望有一个完全CSS/HTML解决方案

回答过的问题更新，以显示示例解决方案

CSS：

#title-section { 
     display: table; 
     position: absolute; 
     height: 100%; 
     width: 100%; } 
    /* line 59, ../scss/style.scss */ 
    .anchor-please { 
     display: table-cell; 
     vertical-align: middle; } 

    /* line 63, ../scss/style.scss */ 
    .portfolio-title { 
     margin-left: auto; 
     margin-right: auto; 
     width: 800px; } 

    /* line 68, ../scss/style.scss */ 
    .title { 
     width: 100%; 
     text-align: center; } 
     /* line 71, ../scss/style.scss */ 
     .title h1 { 
     font-size: 8em; } 
     /* line 74, ../scss/style.scss */ 
     .title h2 { 
     font-size: 2em; } 

    /* line 78, ../scss/style.scss */ 
    .title-top { 
     border: 3px solid #A6A6AB; 
     height: 30px; 
     border-bottom: none; } 

    /* line 83, ../scss/style.scss */ 
    .title-bottom { 
     border: 3px solid #A6A6AB; 
     height: 30px; 
     border-top: none; } 

HTML：

<section id="title-section" class="container-fluid"> 
    <div class="row anchor-please"> 
    <div class="portfolio-title"> 
     <div class="title-top"> 
     <!-- this div is empty and only serves as a border creation. --> 
     </div> 
     <!-- slogan --> 
     <div class="title"> 
     <h1>THIS IS MY TITLE</h1> 
     <h2>This is my slogan</h2> 
     </div> 
     <!-- /slogan --> 
     <div class="title-bottom"> 
     <!-- this div is empty and only serves as a border creation. --> 
     </div> 
    </div> 
    </div> 
</section> 

Answer 1

你错过了一个曲线支架的结束位置：

.title { 
    width: 100%; 
    text-align: center; 

应该是这样的：

.title { 
    width: 100%; 
    text-align: center; 
}