如何使用百分比使DIV的文本中心垂直和水平？答案

【问题标题】：How to make text center of DIV both vetically and horizontally using percentage?如何使用百分比使DIV的文本中心垂直和水平？
【发布时间】：2017-10-31 18:36:36
【问题描述】：

我可以让我的文本居中，但使用 px 值。当我尝试使用百分比时，它不起作用。我试过 display:table;和 display:table-cell 以及 display:flex; 证明内容：中心； //水平居中对齐项目：中心； 但它不起作用。

我的父 div 有高度：7.7%。

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

以下是JSFIDDLE链接：

https://jsfiddle.net/Anthony_Chien/f7n77068/#&togetherjs=gR8VEaLgqR

HTML：

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

CSS：

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

屏幕截图：

【问题讨论】：

请使用代码 sn-p 制作一个我们更容易阅读的版本。您没有发布完整的源代码，因此很难测试。
@HTCom 我已经更新了我的标题的完整代码..
@HTCom 并在 jsfiddle 上添加了我的代码。我在摘要中添加了链接

标签： html css responsive-design

【解决方案1】：

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

.navlogo {
  width: 5%;
  height: 100%;
  background-color: #ffffff;
}
.navlogo span {
  font-family: SourceSansPro;
  font-size: 24px;
  font-weight: bold;
  display:table;height:100%;width:100px;
 }
 .navlogo span a{
	 display:table-cell;vertical-align:middle;text-align:center;margin:0;
 }

<div class="vav-main">
  <nav class="navbar navbar-default navheader">
    <div class="navbar-header navlogo">
        <span><a href ="#">DS</a></span>
    </div>
 </nav>
</div>

【讨论】：

它看起来不错，除了标题高度..这是 7.7%。你没有包括在内。

【解决方案2】：

您可以在您的容器上使用display: table;，在您的孩子上使用display: table-cell;，将您的导航元素垂直和水平居中。然后Ypu可以根据你需要的布局设置容器和元素width。

可能的例子：

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


.navbar{
  display: table;
  width: 100%;
  background-color: #ffffff;
  border: solid 1px #b8b8b8;
 }

.navlogo {
  height: 100;
  background-color: #ffffff;
  width: 5%;
 }

.navlogo span {
  font-family: SourceSansPro;
  font-size: 24px;
  font-weight: bold;
 }
 
 .navbar-header {
  display: table-cell;
  padding: 3.5%;
  vertical-align: middle;
  text-align: center;
 }

<div class="vav-main">
  <nav class="navbar navbar-default">
    <div class="navbar-header navlogo">
      <span><a href ="#">DS</a></span>
    </div>
    <div class="navbar-header">
       ........
    </div>
 </nav>
</div>

【讨论】：

它看起来不错，除了标题高度..这是 7.7%。你没有包括在内..
我用padding: 3.5%;代替，你可以根据你想要的高度设置正确的填充。

【解决方案3】：

.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;
 }
  
  .vav-main> .navbar {
   margin-bottom: 0px;
   min-height:initial;
 }

<div class="vav-main">
  <nav class="navbar navbar-default navheader">
    <div class="navbar-header navlogo">
        <span><a href ="#">DS....</a></span>
    </div>
 </nav>
</div>

您可以使用flex 来实现相同的目的。

更新下面的小提琴

working fiddle

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


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

.navlogo {
  height: 100%;
  width:100%;
  background-color: #ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column nowrap;
 }

.navlogo span {
  font-family: SourceSansPro;
  font-size: 24px;
  font-weight: bold;
 }
 
 .navlogo span a {
   align-self:center;
 }
  .vav-main> .navbar {
   margin-bottom: 0px;
   min-height:initial;
 }

<div class="vav-main">
  <nav class="navbar navbar-default navheader">
    <div class="navbar-header navlogo">
        <span><a href ="#">DS....</a></span>
    </div>
 </nav>
</div>

【讨论】：

它不应该在标题的中心..请检查我附上的截图..
截图在哪里？请为细节制作小提琴
我已经在 jsfiddle 上添加了我的代码。我在摘要中添加了链接

【解决方案4】：

可能你正在使用bootstrap 这样做，如果是这样，那么你可以尝试如下，删除span tag，因为a 和span 标签都是inline elements，所以如果需要你可以使用一个。

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

.nav-main > .navheader {
  width: 100%;
  height: 7.7%;
  background-color: #ffffff;
}

.navlogo {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  text-align: center;
}

.navlogo > a {
  font-family: SourceSansPro;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  margin-top: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="nav-main">
  <nav class="navbar navbar-default navheader">
    <div class="navbar-header navlogo">
      <a href="#">DS</a>
    </div>
    <div>
    </div>
  </nav>
</div>

【讨论】：

它不应该在标题的中心。请检查我附上的截图
@AnthonyChien 删除 text-align center 并且它可以工作，但我在提供的屏幕截图中可以看到有多个徽标，因此您可以通过添加浮动然后更改宽度来对齐它们。跨度>
I@frnt 你提供了 margin-top: 8px;根据问题，这是错误的。它应该是 % 而不是 px..
@ShashankGaurav 正如 OP 所补充的那样 - “当我尝试使用百分比时它不起作用”，即使我用百分比替换值然后在缩放 vh 时元素的位置会随着百分比的变化而变化，而使用 px 效果很好。

【解决方案5】：

我不会修改你的代码，我只是写一小段代码。希望这对您有所帮助。如您所见，lime block 内的文本总是水平居中，垂直居中。

$('#header .text').css('left', 'calc(50% - '+$('#header .text').css('width')+' / 2)');
$('#header .text').css('top', 'calc(50% - '+$('#header .text').css('height')+' / 2)');

#header{
  width:100%;
  height:200px;
  border:1px blue solid;
}
#box{
  width:30%;
  height:80%;
  background-color:lime;
  text-align:center;
  position:relative;
}
#box .text{
  border:1px red solid;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='header'>
<div id='box'>
  <div class='text'>abchghjghj</div>
</div>
</div>

【讨论】：