Html 如何使用百分比在纵向和横向上创建DIV的文本中心？

我可以使我的文本在中心，但使用px值。当我尝试使用百分比时，它不起作用。我尝试了显示：表格；和显示：表格单元格和显示：flex； 证明内容：中心//水平定心 对齐项目：居中但它不起作用

我的父母有身高：7.7%

注意：我已更新了完整的标题代码

下面是JSFIDLE链接：

HTML:

截图图像：

.navheader{
宽度：100%；
高度：100px；
背景色：#ffffff；
边框：实心1px#b8b8；
}
.导航标志{
宽度：5%；
身高：100%；
背景色：#ffffff；
}
.导航标志跨度{
字体系列：SourceSansPro；
字体大小：24px；
字体大小：粗体；
显示：表格；高度：100%；宽度：100px；
}
.导航标志跨度a{
显示：表格单元格；垂直对齐：中间；文本对齐：中心；边距：0；
}

---

您可以使用

显示：表格和
显示：表格单元格
在您的孩子身上，垂直和水平居中导航元素。然后，Ypu可以根据需要的布局设置容器和元素的宽度

可能的例子：


.vav主风管{
位置：相对位置；
宽度：100%；
身高：100%；
}
navbar先生{
显示：表格；
宽度：100%；
背景色：#ffffff；
边框：实心1px#b8b8；
}
.导航标志{
身高：100；
背景色：#ffffff；
宽度：5%；
}
.导航标志跨度{
字体系列：SourceSansPro；
字体大小：24px；
字体大小：粗体；
}
.导航栏标题{
显示：表格单元格；
填充：3.5%；
垂直对齐：中间对齐；
文本对齐：居中；
}

........

.vav主风管{
宽度：100%；
身高：100%；
}
.导航头{
宽度：100%；
身高：7.7%；
背景色：#ffffff；
边框：实心1px#b8b8；
}
.导航标志{
宽度：5%；
身高：100%；
背景色：#ffffff；
位置：相对；/*添加此属性*/
转换：转换（-50%-50%）；/*添加此属性*/
顶部：50%；/*添加此属性*/
左：50%；/*添加此属性*/
}
.导航标志跨度{
字体系列：SourceSansPro；
字体大小：24px；
字体大小：粗体；
}
.vav main>.navbar{
边缘底部：0px；
最小高度：初始高度；
}
可能是您正在使用
引导程序执行此操作，如果是这样，您可以按如下方式进行尝试，删除
span标记
，因为a和span标记都是
内联元素
，因此如果需要，您可以使用一个


.nav main{
宽度：100%；
身高：100%；
}
.nav main>.navheader{
宽度：100%；
身高：7.7%；
背景色：#ffffff；
}
.导航标志{
宽度：100%；
身高：100%；
背景色：#ffffff；
文本对齐：居中；
}
.navlogo>a{
字体系列：SourceSansPro；
字体大小：24px；
字体大小：粗体；
显示：内联块；
边缘顶部：8px；
}
我不修改你的代码，我只写一小段代码。希望这对你有帮助。如您所见，石灰块内的文本始终按水平方向居中对齐，按垂直方向居中对齐


$（'#header.text'）.css（'left'，'calc（50%-'+$（'#header.text'））.css（'width'）+/2'）；
$（'header.text'）.css（'top'，'calc（50%-'+$（'header.text'）.css（'height'）+/2'））
#标题{
宽度：100%；
高度：200px；
边框：1px蓝色实心；
}
#盒子{
宽度：30%；
身高：80%；
背景色：石灰；
文本对齐：居中；
位置：相对位置；
}
#文本框{
边框：1px红色实心；
位置：绝对位置；
}

abchghjghj
请使用代码片段制作一个更易于阅读的版本。您没有发布完整的源代码，因此测试非常困难。@HTCom我已经更新了标题的完整代码。@HTCom并在jsfiddle上添加了我的代码。我在Summary中添加了链接，它不应该位于标题的中心。。请检查我附上的截图。截图在哪里？我已经在JSFIDLE上添加了我的代码。我在Summary中添加了链接，看起来不错，除了页眉高度…为7.7%。你还没有包括…我使用了
填充：3.5%相反，您可以根据需要的高度设置正确的填充。它不应位于页眉的中心。。请检查我的截图attached@AnthonyChien删除文本对齐中心，它可以工作，但我可以在提供的屏幕截图中看到，有多个徽标，所以你可以通过添加浮动，然后改变宽度来对齐它们。I@frnt您已经提供了页边顶部：8px；根据问题，这是错误的。它应该是%not px.@ShashankGaurav，正如OP所添加的那样——“当我尝试使用百分比时，它不起作用”，即使我用百分比替换该值，那么在缩放vh时，元素的位置会随着百分比的变化而变化，而使用px它工作得很好。除了收割台高度…为7.7%，它看起来不错。你没有包括在内。
    <div class="vav-main">
    <nav class="navbar navbar-default navheader">
        <div class="navbar-header navlogo">
            <span><a href ="#">DS</a></span>
        </div>
        <div class="navheadersec2">
            <div class="navheadermargin">
                <div class="btn-group">
                    <button class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="headerspanbox"> <div class="headerdivbox"></div> </span>Default <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                    </ul>
                </div>

                <!--<div class="header-icons">
                    <span class="icons-group"><img src="assets/images/icons/undo.png" /></span>
                    <span class="icons-label">Undo</span>
                </div>-->

                <span class="btn-group icons-grp"><img src="assets/images/icons/undo.png" /><br>Undo</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/redo.png" /><br>Redo</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/zoom-in.png" /><br></span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/zoom-out.png" /><br></span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/group.png" /><br>Group</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/pattern.png" /><br>Pattern</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/lock.png" /><br>Lock</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/select.png" /><br>Select</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/resize.png" /><br>Scale</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Rotate</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Forward</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/backward.png" /><br>Backward</span>
                <span class="btn-group icons-grp"><img src="assets/images/icons/panel.png" /><br>Panel</span>
            </div>
        </div>
        <div class="navheadersec3">
            <div class="navheadermargin">
                <div class="headersec3para">
                    <p class="headerpara">Code</p>
                    <p class="headerpara">Some text</p>
                </div>
                <p class="header-price">2,550</p>
                <span class="btn-group icons-grp info-icon"><img src="assets/images/icons/info.png" /></span>
                <p class="header-price add-to-cart">ADD</p>
            </div>
        </div>
    </nav>
</div>

    .vav-main{
      width: 100%;
      height: 100%;
    }


    .navheader{
      width: 100%;
      height: 7.7%;
      background-color: #ffffff;
      border: solid 1px #b8b8b8;
     }

    .navlogo {
      width: 5%;
      height: 100%;
      background-color: #ffffff;
      position:relative; /* Add this property */
      transform:translate(-50% -50%); /* Add this property */
      top:50%; /* Add this property */
      left:50%; /* Add this property */
     }

    .navlogo span {
      font-family: SourceSansPro;
      font-size: 24px;
      font-weight: bold;
     }

    .navheadersec2 {
      width: 64.76%;
      display: inline-block;
      border-right: solid 1px #b8b8b8;
      height: 100%;
    }

    .navheadersec3{
      width: 30.214%;
      display: inline-block;
      margin-left: -4px;
    }

    .navheadermargin .headersec3para{
      width: 30.53%;
      height: 100%;
      float: left;
      margin-left: 6.10%;
    }

    .headersec3para .headerpara:first-child{
      font-size: 12px;
      margin: 0px !IMPORTANT;
      font-weight: bold;
    }

    .headersec3para .headerpara{
      font-size: 10px;
      margin: 0px !IMPORTANT;
    }

    .header-price{
      margin: 0px;
      height: 100%;
      width: 16.03%;
      float: left;
      text-align: center;
      line-height: 34px;
      font-weight: bold;
      font-size: 18px;
      font-family: SourceSansPro;
    }

    .info-icon{
      margin: auto;
      text-align: center;
      line-height: 34px;
    }

    .info-icon > img{
      width: 20px;
      height: 20px;
    }

    .add-to-cart{
      width: 30.534%;
      font-size: 15px;
      color: #009cff;
    }

    .navheadermargin{
      margin-top: 10px;
      height: 34px;
      margin-bottom: 10px;
    }

    .navheadermargin .btn-group{
      margin-left: 1.3%;
      height: 100%;
      width: 13.510%;
      float: left;
    }

    .navheadermargin .header-icons{
      float: left;
      width: 24px;
      height: 100%;
    }

    .header-icons .icons-group{
      height: 21px;
    }

    .header-icons .icons-group img{
      height: 20px;
      width: 20px;
    }

    .header-icons .icons-label{
      height: 15px;
      font-family: SourceSansPro;
      font-size: 10px;
    }

    .navheadermargin .btn-group button{
      height: 100%;
      width: 100%;
    }

    .headerspanbox{
      display: inline-block;
    }

    .headerspanbox .headerdivbox{
      background-color: #1fb6ff;
      margin-right: 10px;
      height: 14px;
      width: 18px;
    }