内部div文本在一个div块内居中显示

Question

我正在开发网站首页，我的代码在我的PC上运行良好。但是在25%的屏幕尺寸下，内部div向下移动了。以下是快照： 并且在25％的屏幕尺寸下： 希望将其置于中心，即使我使用了position：fixed也没有用。 然而，我更改结构但仍然无效。

.txg{
     position: absolute;
        top: 40%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    .homelogo {
     text-align: center;
     line-height: 1em;
     font-family: helvetica, arial, sans-serif;
     font-weight: bold;
     background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 50px;
    }
    .teg{
     position: absolute;
        top: 50%;
        left: 48%;
        -moz-transform: translateX(-50%) translateY(-48%);
        -webkit-transform: translateX(-50%) translateY(-48%);
        transform: translateX(-50%) translateY(-48%);
    }
    .teg ul{
     list-style: none;
    }
    .teg li{
     display: inline-block;
     background-color: #07ABD8;
     padding:15px;
     border-radius: 8px;
     font-size: 15px;
     text-transform: uppercase;
     font-family: helvetica, arial, sans-serif;
    }
    .teg li a{
     text-decoration: none;
     color: white;
    }

<div class="txg">
        <a class="homelogo logo" href="#">WebSiteName</a>
       </div>
       <div class="teg">
        <ul>
         <li><a href="#">New</a></li>
         <li><a href="#">Top</a></li>
         <li><a href="#">Hd</a></li>
         <li><a href="#">Upcoming</a></li>
        </ul>
       </div> 

完整代码

- Dom

Answer 1

您遇到了由于使用绝对定位造成的问题。我更改了以下样式：

    .txg{
display: inline-block;
text-align: center;
width:100%;
margin-top:10%;
    }

    .teg{
display: inline-block;
text-align: center;
width:100%
    }

通过设置width:100%和text-align:center，您的元素将在多个尺寸下居中。在Chrome上缩小到25％并进行测试。 这里是可工作的示例 顺便说一句，您可以考虑在innerbody上设置width:50%以提高网站的响应能力。

- Jonathan Chaplin

Answer 2

你可以使用Flexbox来实现它：

* {padding: 0; box-sizing: border-box}
body {height: 100vh; margin: 0} /* notice "height: 100vh" (i.e. 100% of the viewport height) */

body { /* or any other parent element of both divs */
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  justify-content: center; /* vertical alignment / it's horizontal by default, but since the flex-direction is changed, so is this */
  align-items: center; /* horizontal alignment / same here, it's vertical by default */
}

/* not necessary
.txg {
  position: absolute;
  top: 40%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
*/

.txg {
  margin-bottom: 10px; /* a little bit of vertical gap */
}

.homelogo {
  /*text-align: center; not necessary since it's already centered */
  line-height: 1em;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 50px;
}

/* not necessary
.teg {
  position: absolute;
  top: 50%;
  left: 48%;
  -moz-transform: translateX(-50%) translateY(-48%);
  -webkit-transform: translateX(-50%) translateY(-48%);
  transform: translateX(-50%) translateY(-48%);
}
*/

.teg ul {
  display: flex; /* added */
  list-style: none;
}

.teg ul li a { /* added anchor tag to increase clickable area, recommended */
  /*display: inline-block;*/
  margin: 0 5px; /* added */
  background-color: #07ABD8;
  padding: 15px;
  border-radius: 8px;
  font-size: 15px;
  text-transform: uppercase;
  font-family: helvetica, arial, sans-serif;
  text-decoration: none;
  color: white;
}

<div class="txg">
  <a class="homelogo logo" href="#">WebSiteName</a>
</div>
<div class="teg">
  <ul>
    <li><a href="#">New</a></li>
    <li><a href="#">Top</a></li>
    <li><a href="#">Hd</a></li>
    <li><a href="#">Upcoming</a></li>
  </ul>
</div>

- VXp