html - CSS-Centering-多行

This question already has answers here:

How do I vertically center text with CSS? [duplicate]
                                
                                    （38个答案）
                                
                        
                        
                            Vertically centering a div inside another div [duplicate]
                                
                                    （24个答案）
                                
                        
                        
                            Flexbox: center horizontally and vertically
                                
                                    （11个答案）
                                
                        
                                2年前关闭。
            
                    

.center {
  height: 200px;
  border: 3px solid green;
  text-align: center;
  vertical-align: middle;
}

p {
  margin: 0;
  padding: 0;
}

<div class="center">
  <p>I am vertically and horizontally centered.</p>
  <p>I am vertically and horizontally centered.</p>
</div>

如何使线条垂直居中？先感谢您！一世

最佳答案

Flexbox解决方案：

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid green;
  height: 200px;
}

p {
  margin: 0;
  padding: 0;
}

<div class="center">
  <p>I am vertically and horizontally centered.</p>
  <p>I am vertically and horizontally centered.</p>
</div>