要素の真ん中に配置されない

Question

more要素がdesign要素の真ん中に配置されません。

        <div class="design">
          <a href="design.html" target="_blank"><img src="portfolio_images/portfolio_top.png">
          <div class="design-text">
            <p class="title">ポートフォリオ</p>
            <p class="more">more</p>
          </a>
          </div>
        </div>

.design a img{
  width:100%;
}

.design{
  width:300px;
  height:200px;
  padding-bottom:34px;
  position: relative;
  overflow: hidden;
}

.design-text{
  width:300px;
  height:200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  display: flex;
  align-items: center;
}

.design-text:hover{
  opacity: 1;
  transition: all 0.6s ease;
}

.design-text a{
  margin: 0 auto;
  color: #fff;
}

.title{
  font-size: 14px;
}

.more{
  margin-top:10px;
  border: 1px #fff solid;
  padding:5px;
  font-size: 12px;
  text-align: center;
  width:60px;
}

.more:hover{
  background-color: white;
  color: rgba(0,0,0,0.5);
  transition: all 0.3s;
}

Answer 1

.design-list{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.design-item{
  width: 32%;
  position: relative;
  overflow: hidden;
  margin-bottom: 80px;
}
.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;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.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 2

入力ミスかと思いますが現在のCSSが不明なのでどうしたいのか曖昧です。

自分は初心者なので参考程度に見ていただければいいですが…

p.more を div.design の真ん中に持ってきたいという話であれば、
div.design に幅を持たせる必要があり、もちろん p.more にも幅を持たせる必要があるように思います。

.design {
	width: 600px;
}

.design .design-text p.more {
	width: 400px;
	margin: 0 auto;
}

例えばですが、このように親の幅が決められていて、p.moreにも幅が定められているなら、
marginの左右を auto と指定することで子のブロック要素は真ん中に配置されると思います。

もし意図しているものと違う回答でしたら、また詳しく教えてください。