Question

我一直在为网站编写一些代码，而我无法垂直居中。我已经在StackOverflow和其他网站上阅读了关于如何垂直居中html（主要使用display:table和display:table-cell方法以及top:50%, transformY方法）的多个答案，但是，我无法实现这两种方法都成功了。我在这里附上了我的代码，希望有人能够发现我的错误导致代码无效。（在此代码中，我使用了垂直居中文本的top:50%, transformY方法）。任何帮助将不胜感激。

HTML ：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="stylesheet.css">
  <title>Game Timer and Scorekeeper</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row" id="heading">
      <div class="col-xs-12">
        <div class="positioner">
          <h1>Game Timer and Scorekeeper</h1>
        </div>
      </div>
    </div>
    <div class="row" id="top-labels">
      <div class="col-xs-3 labels teamlabel" id="a-label">
        <div class="positioner">
          <h2>Team A</h2>
        </div>
      </div>
      <div class="col-xs-6 labels" id="gameclock-label">
        <div class="positioner">
          <h2>Game Clock</h2>
        </div>
      </div>
      <div class="col-xs-3 labels teamlabel" id="b-label">
        <div class="positioner">
          <h2>Team B</h2>
        </div>
      </div>
    </div>
    <div class="row" id="thirdrow">
      <div class="col-xs-3 pointsclock teampoints" id="pointsA">
        <div class="positioner">
          <h1>POINTS A</h1>
        </div>
      </div>
      <div class="col-xs-6 pointsclock" id="gameclock">
        <div class="positioner">
          <h1>GAME CLOCK</h1>
        </div>
      </div>
      <div class="col-xs-3 pointsclock teampoints" id="pointsB">
        <div class="positioner">
          <h1>POINTS B</h1>
        </div>
      </div>
    </div>
    <div class="row" id="fourthrow">
      <div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
        <div class="positioner">
          <h2>CONTROL A</h2>
        </div>
      </div>
      <div class="col-xs-6 ptcontclock" id="questionclock">
        <div class="positioner">
          <h2>QUESTION CLOCK</h2>
        </div>
      </div>
      <div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
        <div class="positioner">
          <h2>CONTROL B</h2>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS ：

.container-fluid {
  width: 100vw;
  height: 100vh;
}

#heading {
  height: 15vh;
  border: 2px solid;
}

#top-labels {
  height: 10vh;
  border: 2px solid;
  width: 100vw;
}

#top-labels .labels {
  border-right: 2px solid;
  border-left: 2px solid;
}

#thirdrow {
  height: 40vh;
  border: 2px solid;
  width: 100vw;
}

#thirdrow .pointsclock {
  height: 40vh;
  border-right: 2px solid;
  border-left: 2px solid;
}

#fourthrow {
  height: 35vh;
  width: 100vw;
}

#fourthrow .ptcontclock {
  border-right: 2px solid;
  border-left: 2px solid;
  height: 35vh;
}

.positioner{
  height:100%;
  width:100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 1

你可以试试这个。

<强> HTML

<main>
   <div>
       I'm a block-level element with an unknown height, centered vertically 
       within my parent.
   </div>
</main>

<强> CSS

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

<main>
  
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>

点击此链接以参考https://css-tricks.com/centering-css-complete-guide/

垂直居中（使用Bootstrap-CSS）

1 个答案: