CSS-Centering-多行

Question

＆＃13;

＆＃13;

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

p {
  margin: 0;
  padding: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何使线垂直居中？先感谢您！我

Answer 1

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>

Answer 2

您可以使用display: flex：

＆＃13;

＆＃13;

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

p {
  border: 1px solid red;
  margin: 0;
  padding: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

请尝试使用此代码

＆＃13;

＆＃13;

.center {
    height: 200px;
    border: 3px solid green;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    vertical-align: middle;
}

p {
    margin: 0px;
    padding: 0px;        
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;