如何垂直居中我的内容

Question

如何将所有文本内容（主要与下拉按钮和块有关）垂直集中在此处？我尝试了我可以在网上搜索和查找的内容，但无法在视觉上产生我想要的结果。

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

我无法使用固定的内边距或边距来达到我的需要，尝试过，调整页面大小时看起来不正确。

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

确实，我很想找到一种让它工作的好方法，如果适用，我想复制它以使其水平居中，因为目前我为此目的使用填充，但它并不完美。但是，我可以忍受这一点，因为无论如何我都会有一个已知的最大宽度。

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

Answer 2

好的，尝试和错误是匆忙时要走的路：D

因此，在发布此内容并拒绝放弃之后，尽管我的理解破碎而支离破碎，并且很少有时间面对自己的需求，但通过反复试验，我最终能够以某种方式得到我想要的东西

这段代码并不完美也不干净，但我希望它可以帮助别人。生活和学习：D

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

   .div1:hover {
	 background-color: red;
	 opacity: 0.95
	}

    .center-block {
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      position: absolute;
      }

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

 <div class="div1">
    <div class="center-block">
    <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 3

div{
  width: 350px;
  height: 150px;
  background-color: green;
  color: white;
  margin-bottom: 10px;
  display: flex;
}
#div1{
  justify-content: center;
}
#div2{
  align-items: center;
}
#div3{
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

<div id="div1">
  Horizontally centered
</div>
<div id="div2">
  Vertically centered
</div>
<div id="div3">
  Both Horizontally & Vertically centered
</div>