flexbox 親要素に対して中央

flexboxで要素を横並びにしています。
子要素のpostsの中でセンターになっていて全体から見るとずれているので、親要素に対して、センターにしたいです。
子要素を親要素に対してセンターにするにはそうしたらいいでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" href="/css/styles.css">
5    <meta charset="utf-8">
6    <title>メインページ</title>
7    <h1>掲示板へようこそ</h1>
8    <h2>新規投稿</h2>
9  </head>
10  <body>
11  <section>
12    <form action="" method="post">
13      <label for="title">タイトル</label><br>
14      <input type="text" name="title" id="title"><br>
15      <button type="submit">部屋を立てる</button>
16      <input type="hidden" name="token" value="29a27366d051dfe26cea26b9a13342519343257dd8fd7e5d3dfd9f3c4a489c28">
17    </form>
18    <h2>投稿一覧</h2>
19    <p>現在の投稿は71件です</p>
20    <div class="flexbox">
21      <div class="posts">
22        <a href='threads.php?boards_id=143'>
23            ゆうき            2020-03-04 10:21:14 <br>
24            質問          </a>
25      </div>
26      <div class="button">
27        <form action="change.php" method="get">
28          <button type="submit" name="boards_id" value="143">編集</button>
29        </form>
30        <form action="delete.php" method="get">
31          <button type="submit" name="boards_id" value="143">削除</button>
32        </form>
33      </div>
34    </div>
35  </section>
36  </body>
37</html>

css
1h1,h2,form{
2  text-align:center;
3}
4
5body,form{
6  margin:0;
7}
8
9a,p{
10  color:blue;
11}
12
13.error{
14  text-align:center;
15  color:red;
16}
17
18button{
19  display: inline-block;
20  padding: 0.3em 1em;
21  text-decoration: none;
22  color: #67c5ff;
23  border: solid 1px #67c5ff;
24  border-radius: 3px;
25  transition: .4s;
26  outline:none;
27}
28
29.button{
30  display:block;
31}
32
33.button :hover{
34  background: #67c5ff;
35  color: white;
36}
37
38.flexbox{
39  display:flex;
40  text-align: center;
41}
42
43.posts{
44  background-color:#ffeecc;
45  width:100%;
46  text-align: center;
47}
48
49.posts a{
50  display: flex;
51  height: 100%;
52  justify-content: center;
53  align-items: center;
54}

行動規範の内容に同意します

回答1件

ベストアンサー

.posts a を親要素の.posts基準ではなく、祖父要素の.flexbox基準で上下左右中央寄せにしたいということですね。

position: relative;で基準要素を決めて、position: absolute;で絶対位置で位置とサイズを決めます。
top:0; bottom: 0; left: 0; right: 0;とすることで基準要素と位置とサイズが同じになります。
top:0; left: 0; width: 100%; height: 100%;としても同じです。

css
1.button{
2  display:block;
3  z-index: 1; /* ボタンをクリックできるよう前面に移動 */
4}
5
6.flexbox{
7  display:flex;
8  text-align: center;
9  position: relative; /* 基準 */
10}
11
12.posts a{
13  position: absolute; /* .flexboxを基準として絶対位置指定 */
14  top:0;
15  bottom: 0;
16  left: 0;
17  right: 0;
18  display: flex;
19  justify-content: center;
20  align-items: center;
21}