CSS-Centering-Multiple lines

Question

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

How do I make the lines vertically-centered? Thank you in advance! I

use display:flex ;here is url https://www.w3schools.com/Css/tryit.asp?filename=trycss3_flexbox_align-items_center — parag parmar, May 31 '18 at 05:53

score 1 · Accepted Answer · edited May 31 '18 at 05:55

1

Flexbox solution:

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

edited May 31 '18 at 05:55

VXp

10,307
6
25
40

answered May 31 '18 at 05:52

Nandita Sharma

12,347
2
14
26

Adam · Answer 2 · 2018-06-01T15:18:44.160

1

You can use display: flex:

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

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

edited Jun 01 '18 at 15:18

answered May 31 '18 at 05:55

Adam

1,366
8
22

score 0 · Answer 3 · answered May 31 '18 at 05:56

Please Try this Code

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

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

CSS-Centering-Multiple lines

3 Answers3