pタグを上下に並べて中央配置したい

Question

【追記】左右は中央になったので、CSSを編集しました。
上下中央ができません。。。

【design-list-item】の画像をhoverすると、画像上に
【design-list-text】の中の【pクラスtitle】と【pクラスmore】の文字が上下中央に並ぶようにしたいです。。。

    <section class="section-wrapper">
      <h2 class="section-title">design</h2>
      <ul class="design-list">
        <li class="design-item">
          <a href="portfolio_pf.html" target="_blank">
            <div class="design-list-img"><img src="./img/portfolio_top.png"></div>
            <div class="design-list-text">
              <p class="title">ポートフォリオサイト</p>
              <p class="more">more</p>
            </div>
          </a>
        </li>

.design-list{
  max-width: 1000px;
  margin: 0 auto 80px;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
}
.design-item{
  width: 32%;
  position: relative;
  overflow: hidden;
}
.design-item a{
  color: #141414;
  text-decoration: none;
}
.design-list-text{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  text-align: center;
  align-items: center;
  color: #fff;
}
.design-list-text:hover{
  opacity: 1;
  transition: all 0.6s ease;
}
.title{
  padding-bottom: 10px;
}
.more{
  border: 1px #fff solid;
  padding:5px;
  font-size: 12px;
  width:60px;
}
.more:hover{
  background-color: white;
  color: rgba(0,0,0,0.5);
  transition: all 0.3s;
}
.design-list-text p {
  margin: 0 auto;
}

Answer 1

こんにちは。

こういうことでしょうか？

サンプル

.design-list-text {
	display: flex;
	flex-flow: column;
	justify-content: center;
}

Comments

[_arukuneko]

ありがとうございました！！

Answer 2

.design-list-text{
display: flex; ←削除
padding-top:00px; ←高さの調整もしたい場合、ここで調整
}
どうでしょう！