Как центрировать мой контент по вертикали

Question

Как я могу получить весь текстовый контент (первичный, связанный с выпадающей кнопкой и блоком), вертикально централизованный? Я попробовал то, что мог исследовать и найти в Интернете, но я не мог получить его для получения результатов, которые я хочу визуально.

Мне нужно сохранить ширину и высоту в качестве переменных, поэтому я могу идти только с процентами.

Я не могу использовать фиксированные прокладки или поля для достижения того, что мне нужно, попробовал, не будет выглядеть правильно, когда страница будет изменена.

Я ценю любые указания, я могу получить здесь, слишком новый для кодирования, но я стараюсь, чтобы узнать :) такой нуб лол

Действительно, я хотел бы найти хороший способ, чтобы заставить его работать, и, если применимо Я хотел бы повторить то же самое, чтобы сосредоточить его по горизонтали, так как в настоящее время я использую прокладку для этой цели, но это не идеально. Однако я могу жить с этим, потому что в любом случае у меня будет известная максимальная ширина.

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

 
    .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; 
 
    } 
 
\t \t </style> 
 
\t \t \t 
 
\t \t

<div class="div1"> 
 
<div class="dropdown"> 
 
    \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

ок, проб и ошибок является путь, когда в спешке: D

так, после публикации этого и отказывается сдаваться, несмотря на мою разбитой и фрагментированной понимания и очень мало времени, чтобы справиться с моими потребностями, я смог получить именно то, что хотел как-то в конце, через пробную версию и ошибку

Этот код является самым разборчивым и не чистым, но я надеюсь, что это поможет кому-то иногда. Жить и учиться: D

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

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

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

Answer 2

Я надеюсь, что это то, что вы после этого (все еще нуждается в некоторой настройке, хотя). Я добавил высоту 100% в тег html & и вертикально центрировал содержимое с помощью класса .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 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>