フレックスボックスを使用した垂直センタリング

Question

現在、ラッパーを垂直方向にセンタリングする際に問題が発生しています。私はフレックスを表示し、別の投稿によって示唆されたようにアイテムの中心を整列させ、動作しなかったdivを作成しようとしました。どのようなアイデアの理由と解決方法？

body { 
 
    font-family: Arial, sans-serif; 
 
    background: #ddd; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
 
    color: #333; 
 
    text-shadow: 0 1px 0 #fff; 
 
    margin: 50px 0; 
 
} 
 

 
#center { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#wrapper { 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
    padding: 20px; 
 
    border: 10px solid #aaa; 
 
    border-radius: 15px; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
} 
 

 
.button { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 13px; 
 
    padding: 5px 10px; 
 
    border: 1px solid #aaa; 
 
    background-color: #eee; 
 
    background-image: linear-gradient(top, #fff, #f0f0f0); 
 
    border-radius: 2px; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); 
 
    color: #666; 
 
    text-decoration: none; 
 
    text-shadow: 0 1px 0 #fff; 
 
    cursor: pointer; 
 
    transition: all 0.2s ease-out; 
 
} 
 

 
.button:hover { 
 
    border-color: #999; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 
 
} 
 

 
.button:active { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    transition: opacity 200ms; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 

 
.overlay.light { 
 
    background: rgba(255, 255, 255, 0.5); 
 
} 
 

 
.overlay .cancel { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    cursor: default; 
 
} 
 

 
.overlay:target { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.popup { 
 
    margin: 75px auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
    border: 1px solid #666; 
 
    width: 300px; 
 
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
} 
 

 
.light .popup { 
 
    border-color: #aaa; 
 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); 
 
} 
 

 
.popup h2 { 
 
    margin-top: 0; 
 
    color: #666; 
 
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
 
} 
 

 
.popup .close { 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    top: 20px; 
 
    right: 20px; 
 
    opacity: 0.8; 
 
    transition: all 200ms; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: #666; 
 
} 
 

 
.popup .close:hover { 
 
    opacity: 1; 
 
} 
 

 
.popup .content { 
 
    max-height: 400px; 
 
    overflow: auto; 
 
} 
 

 
.popup p { 
 
    margin: 0 0 1em; 
 
} 
 

 
.popup p:last-child { 
 
    margin: 0; 
 
} 
 

 
iframe { 
 
    border: none; 
 
}

<div id="center"> 
 
    <div id="wrapper"> 
 
    <p><a class="button" href="#popup1">Click Me</a></p> 
 
    </div> 
 

 
    <div id="popup1" class="overlay"> 
 
    <div class="popup"> 
 
     <h2>Drop Day</h2> 
 
     <a class="close" href="#">&times;</a> 
 
     <div class="content"> 
 
     <p>Hello</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたの主なラッパー（のdiv＃センター）は、その高さが定義されている必要があります。

 body { 
 
      font-family: Arial, sans-serif; 
 
      background: #ddd; 
 
     } 
 
     
 
     h1 { 
 
      text-align: center; 
 
      font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
 
      color: #333; 
 
      text-shadow: 0 1px 0 #fff; 
 
      margin: 50px 0; 
 
     } 
 
     
 
     #center { 
 
      display: flex; 
 
      align-items: center; 
 
      /* or any other height you want */ 
 
      height: 100vh; 
 
     } 
 
     
 
     #wrapper { 
 
      width: 100px; 
 
      margin: 0 auto; 
 
      background: #fff; 
 
      padding: 20px; 
 
      border: 10px solid #aaa; 
 
      border-radius: 15px; 
 
      background-clip: padding-box; 
 
      text-align: center; 
 
     } 
 
     
 
     .button { 
 
      font-family: Helvetica, Arial, sans-serif; 
 
      font-size: 13px; 
 
      padding: 5px 10px; 
 
      border: 1px solid #aaa; 
 
      background-color: #eee; 
 
      background-image: linear-gradient(top, #fff, #f0f0f0); 
 
      border-radius: 2px; 
 
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); 
 
      color: #666; 
 
      text-decoration: none; 
 
      text-shadow: 0 1px 0 #fff; 
 
      cursor: pointer; 
 
      transition: all 0.2s ease-out; 
 
     } 
 
     
 
     .button:hover { 
 
      border-color: #999; 
 
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 
 
     } 
 
     
 
     .button:active { 
 
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset; 
 
     } 
 
     
 
     .overlay { 
 
      position: absolute; 
 
      top: 0; 
 
      bottom: 0; 
 
      left: 0; 
 
      right: 0; 
 
      background: rgba(0, 0, 0, 0.5); 
 
      transition: opacity 200ms; 
 
      visibility: hidden; 
 
      opacity: 0; 
 
     } 
 
     
 
     .overlay.light { 
 
      background: rgba(255, 255, 255, 0.5); 
 
     } 
 
     
 
     .overlay .cancel { 
 
      position: absolute; 
 
      width: 100%; 
 
      height: 100%; 
 
      cursor: default; 
 
     } 
 
     
 
     .overlay:target { 
 
      visibility: visible; 
 
      opacity: 1; 
 
     } 
 
     
 
     .popup { 
 
      margin: 75px auto; 
 
      padding: 20px; 
 
      background: #fff; 
 
      border: 1px solid #666; 
 
      width: 300px; 
 
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); 
 
      position: relative; 
 
     } 
 
     
 
     .light .popup { 
 
      border-color: #aaa; 
 
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); 
 
     } 
 
     
 
     .popup h2 { 
 
      margin-top: 0; 
 
      color: #666; 
 
      font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
 
     } 
 
     
 
     .popup .close { 
 
      position: absolute; 
 
      width: 20px; 
 
      height: 20px; 
 
      top: 20px; 
 
      right: 20px; 
 
      opacity: 0.8; 
 
      transition: all 200ms; 
 
      font-size: 24px; 
 
      font-weight: bold; 
 
      text-decoration: none; 
 
      color: #666; 
 
     } 
 
     
 
     .popup .close:hover { 
 
      opacity: 1; 
 
     } 
 
     
 
     .popup .content { 
 
      max-height: 400px; 
 
      overflow: auto; 
 
     } 
 
     
 
     .popup p { 
 
      margin: 0 0 1em; 
 
     } 
 
     
 
     .popup p:last-child { 
 
      margin: 0; 
 
     } 
 
     
 
     iframe { 
 
      border: none; 
 
     }

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'> 
 
</head> 
 

 
<body> 
 
    <div id="center"> 
 
     <div id="wrapper"> 
 
      <p><a class="button" href="#popup1">Click Me</a></p> 
 
     </div> 
 

 
     <div id="popup1" class="overlay"> 
 
      <div class="popup"> 
 
       <h2>Drop Day</h2> 
 
       <a class="close" href="#">&times;</a> 
 
       <div class="content"> 
 
        <p>Hello</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</body> 
 

 
</html>