html - 如何垂直居中我的内容

Question

我怎样才能让所有的文本内容(主要与下拉按钮和 block 有关)垂直集中在这里？我尝试了我可以研究和在网上找到的东西，但我无法让它在视觉上产生我想要的结果。

我需要将宽度和高度保持为变量，所以我只能使用百分比。

我无法使用固定的填充或边距来实现我需要的效果，试过了，在调整页面大小时看起来不正确。

我很感激我能在这里得到任何指导，对编码来说太新了，但我正在努力学习 :) 这样的菜鸟哈哈

事实上，我很想找到一种让它工作的好方法，如果适用的话，我想复制相同的方法使其水平居中，因为目前我正在为此目的使用填充，但它并不完美。但是，我可以接受这一点，因为在任何情况下我都会有一个已知的最大宽度。

	.div1 {
		Height: 100%;
		Width: 100%;
		background-color: D4D4D2;
		opacity: 0.75
	}
	.div1:hover {
		background-color: red;
		opacity: 0.95
	}

    .dropbtn {
    background-color: transparent;
    color: black;
    padding: 10px 14px;
    font-size: 20px;
    text-align:center;
    border: none;
    cursor: pointer;
    position: relative;
    min-width: 310px;
    }

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: relative;
    background-color: transparent;
    min-width: 310px;
    }

    .dropdown-content a {
    color: black;
    position: relative;
    padding: 12px 16px;
    text-decoration: none;
    text-align:center;
    display: block;
    }

    .dropdown-content a:hover {background-color: none}
    .dropdown-content a:hover {color: white}
    .dropdown:hover .dropdown-content {
    display: block;
    }

    .dropdown:hover .dropbtn {
    background-color: transparent;
    color: white;
    }
		</style>
			
		

<div class="div1">
<div class="dropdown">
 			 <h2>Hoverable Dropdown</h2>
    <p>Move the mouse over the button to open the dropdown menu.</p>

    <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
    <a href="#">Link 1 link very  long</a>
    <a href="#">Link 2 medium</a>
    <a href="#">Link 3</a>
    </div>
				</div>
			</div>
		</div>

Answer 1

我希望这就是您所追求的(尽管仍然需要一些调整)。我为 html 和 body 标签添加了 100% 的高度，并使用 .center-vertical 类将内容垂直居中。如果您想垂直居中内容，大部分时间都会使用此解决方案，因此最好记住这一点 :)

body,
html {
  height: 100%;
}
.div1 {
  Height: 100%;
  Width: 100%;
  background-color: #D4D4D2;
  opacity: 0.75;
}
.div1:hover {
  background-color: red;
  opacity: 0.95;
}
.dropbtn {
  background-color: transparent;
  color: black;
  padding: 2px 14px;
  font-size: 20px;
  text-align: center;
  border: none;
  cursor: pointer;
  position: relative;
  min-width: 310px;
}
.dropdown {
  display: block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: transparent;
  min-width: 310px;
}
.dropdown-content a {
  color: black;
  position: relative;
  padding: 2px 16px;
  text-decoration: none;
  text-align: center;
  display: block;
}
.dropdown-content a:hover {
  background-color: none
}
.dropdown-content a:hover {
  color: white
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: transparent;
  color: white;
}
.center-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="div1">
  <div class="dropdown ">
    <h2>Hoverable Dropdown</h2>
    <p>Move the mouse over the button to open the dropdown menu.</p>

    <div class="dropdown center-vertical">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1 link very  long</a>
        <a href="#">Link 2 medium</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>