Text-align: center and align-items: center not working horizontally

Just add

justify-content: center;

to your box class.

That's all you need to do. See here.

You can use this solution using flexbox.

What was changed?

• Added flex-direction: column to .boxes to define how the flex items (<p> element) are placed in the flex container (.boxes).
• Added align-items: center to center the flex items along the horizontal axis.
• Added justify-content: center to center the flex items (<p> element) on the vertical axis.

* { 
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%; 
}

.boxes {
  height: 100%;
}
.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 20%;
  justify-content: center;
  width: 33%;
}
.box1 {
  background: magenta; 
}
.box2 { 
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 { 
  background: purple;
}

<div class="boxes">
  <div class="box box1"><p>Box 1</p></div>
  <div class="box box2"><p>Box 2</p></div>
  <div class="box box3"><p>Box 3</p></div>
  <div class="box box4"><p>Box 4</p></div>
  <div class="box box5"><p>Box 5</p></div>
</div>

Use this:

 .box p {
    align-items: center;
    display: block;
    text-align: center;
    width: 100%;
}

Try the following options

.boxes {
height:100%;
}
.box {
  width: 33%;
  height: 20%;
}
.box p {
  text-align: center;
}
.box1 {
  background: magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}

Note: i used text-align insted of align-items