HTML/CSS　画像(fv)にborderと文字を中央で重ね合わせたい

質問失礼します。
HTML/CSSを独学で学習している者です。

現在、下記画像の白borderと文字の配置に苦戦しております。
背景画像はfvで、白borderと文字を真ん中に位置させたいです。
元々は、<h2>Design.</h2>にすべて記載していたんですが、<div class="fv">を追加してborder部分と文字を別々に記載する、に変更してみたんですが、何も変わらず。。。

修正点お教えくださいませ！

HTML
1<div class="fv_img">
2                <div class="fv">
3                    <h2>Design.</h2>
4                </div>
5            </div>

CSS
1div.fv_img {
2    width: 100vw;
3    height: 740px;
4    background-image: url(./img/fv-bgi@2x.jpg);
5    background-size: cover;
6    z-index: -1;
7    position: relative;
8
9}
10
11div.fv {
12    position: absolute;
13    top: 0;
14    right: 0;
15    bottom: 0;
16    left: 0%;
17    margin: auto;
18    padding: auto;
19  
20}
21
22div.fv h2 {
23    width: 449px;
24    height: 136px;
25    color: #fff;
26    border: 2px solid white;
27    position: absolute;
28    top: 0;
29    right: 0;
30    bottom: 0;
31    left: 0%;
32    margin: auto;
33    font-size: 50px;
34    
35}

下記の様に、CSS書き直してみたのですがどうしでだか
枠線と文字が重なり合いません。

CSS
1div.fv_img {
2    width: 100vw;
3    height: 90vh;
4    background-image: url(./img/fv-bgi@2x.jpg);
5    background-size: cover;
6    z-index: -1;
7    display: flex;
8    justify-content: center;
9    align-items: center;
10    flex-direction: column;
11    margin-bottom: 100px;
12       
13}
14
15div.fv h2 {
16    width: 449px;
17    height: 136px;
18    font-size: 5rem;
19    color: #fff;
20    border: 2px solid white;
21    padding: 34px 42px;
22   
23}

＜追記＞

Design.を丁度ボーダーの真ん中に配置したいです。

meg_

2021/04/22 10:31

> 下記の様に、CSS書き直してみたのですがどうしでだか枠線と文字が重なり合いません。欲しい結果が良く分からないです。「枠線と文字が重なり合い」とはどういう状態ですか？

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

回答1件

ベストアンサー

書き直したcssに少し手を加えてあげれば修正できそうです。

css
1div.fv_img {
2    width: 100vw;
3    height: 90vh;
4    background-color: #333;
5    display: flex;
6    justify-content: center;
7    align-items: center;
8}
9
10div.fv h2 {
11    font-size: 5rem;
12    color: #fff;
13    border: 2px solid white;
14    padding: 34px 80px;
15    text-align: center;
16}