背景とテキストのみの場合、縦方向の中央揃えってできますか？

Question

https://koukoku-unyou.com/recruit/
上記のメインビジュアル部分についての質問です。
【Q1】
https://qiita.com/Shinji-m/items/69a392685699f3ba95fb
このサイトを見て、テキスト<p>Be Simple</p>の縦中央揃えをしようとしたのですが、

display: flex;
align-items: center;

などでうまく行きませんでした。(載ってるものを全部試しましたが、うまく行きませんでした。)
padding-topとレスポンシブで無理やり中央っぽいところに配置は出来るのですが、
なるべく自動で中央に配置出来るようにしたいです。
【Q2】
あとなぜかテキストの下の部分が一部欠けてしまいます。

お手数ですがよろしくお願いします。

【更新】

<section class="workstyle-copy">
  <div class="workstyle-copy-wrap">
    <!-- 背景用の動画ファイル -->
    <video class="workstyle-copy-video"  poster="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/high-five.png" autoplay loop muted >
      <source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/city.mp4">
      <source src="https://koukoku-unyou.com/wp-content/themes/%E5%BA%83%E5%91%8A%E9%81%8B%E7%94%A8%28Layout-07%29//img/high-five.mov">
    </video>
    <!-- オーバーレイ -->
    <div class="overlay"></div>
    <!-- 背景の上に表示させたいコンテンツ -->
    <div class="workstyle-copy-title">
      <p>Be Simple</p>
    </div>
  </div>
</section>

.workstyle-copy {
  height: 500px;
  position: relative;
}

.workstyle-copy .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 50%);
  background-size: 3px 3px;
  z-index: 2;
}

.workstyle-copy-wrap {
  margin: 0 auto;
  overflow: hidden;
}

.workstyle-copy::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background: rgba(0, 0, 0, 0.2);
  background-size: 3px 3px;
  background-size: cover;
}

/* ----- 背景用の動画ファイル ----- */
.workstyle-copy-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-image: url(../img/high-five.png);
  -o-object-fit: cover;
     object-fit: cover;
}

/* ----- 背景の上に表示させたいコンテンツ ----- */
.workstyle-copy-title {
  position: relative;
  /*必ず必要*/
  z-index: 2;
  /*必ず必要*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  margin: auto;
}

.workstyle-copy-title p {
  font-family: 'Pacifico', cursive;
  font-size: 14vw;
  color: rgba(68, 255, 0, 0.9);
  font-weight: bold;
}

//hatenaさんに頂いたコード
.workstyle-copy-wrap {
  position: relative;
}

.workstyle-copy-title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

Comments

[退会済みユーザー]

URL は「リンクの挿入」を使用すると、回答者の手間が減ります。

Answer 1

下記のCSSの追加でどうでしょう。
https://koukoku-unyou.com/recruit/ で検証ツールにてCSSを追加して動作確認済みです。

.workstyle-copy-wrap {
    position: relative;
}
.workstyle-copy-title {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

下記の6番目のtransformを使った方法です。
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

今回のように複数のブロック(video と workstyle-copy-title)がある場合は、Flexではうまくいかない。

Comments

[takawork]

ありがとうございます。早速追加してみたのですが、文字とオーバーレイが消えてしまいました。
既存のコードのどこかしらを削除する必要があるのでしょうか？ちょっと混乱しております、、、

[takawork]

こんな感じかなとコードをいじってみたのですが、上手く行かなかったです、、、
```
.workstyle-copy {
height: 500px;
position: relative;
}

.workstyle-copy .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 50%);
background-size: 3px 3px;
z-index: 2;
}

.workstyle-copy-wrap {
max-width: 1140px;
margin: 0 auto;
overflow: hidden;
position: relative;
}

.workstyle-copy::before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: 50% 100%;
background: rgba(0, 0, 0, 0.2);
background-size: 3px 3px;
background-size: cover;
}

/* ----- 背景用の動画ファイル ----- */
.workstyle-copy-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-image: url(../img/high-five.png);
-o-object-fit: cover;
object-fit: cover;
}

/* ----- 背景の上に表示させたいコンテンツ ----- */
.workstyle-copy-title {
position: relative;
/*必ず必要*/
z-index: 2;
/*必ず必要*/
position: absolute;
top: 50%;
right: 50%;
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}

.workstyle-copy-title p {
font-family: 'Pacifico', cursive;
font-size: 240px;
color: rgba(68, 255, 0, 0.9);
font-weight: bold;
}
```

[hatena19]

https://koukoku-unyou.com/recruit/ に検証ツールで直接CSSを追加したらうまくいっているのは確認済みです。
提示のCSSコードはリンク先と少し違うようです。
現象の確認できるHTMLコードとCSSコードを回答に追記してください。

[takawork]

大変申し訳ないのですが、
頂いたコードを各クラスに入れるだけで良いのでしょうか？
それとももともと入っていたdisplay:flexなどは外しますか？

[hatena19]

https://koukoku-unyou.com/recruit/ の場合は、回答のCSSを追加するだけでいいはずです。

[takawork]

質問文のHTMLとCSSを更新させて頂きました。
【今の状況】
クロームで頂いた下記のコードをscssにそのまま貼り付けたところ、文字とオーバーレイが消えてしまいました。
コードを適用したままにしておきますので、お手数ですがサイトで更新をして確認をお願いします。
```
.workstyle-copy-wrap {
position: relative;
}
.workstyle-copy-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```

[hatena19]

HTMLコードはPHPのものではなく、実際に出力されたHTMLコードを提示してください。でないと確認できません。
また、https://koukoku-unyou.com/recruit/ のページのCSSに回答のCSSコードを追加して結果を確認してみてください。

[takawork]

失礼しました！質問文のHTMLを更新させて頂きました。
頂いたコードを↓のサイトに貼り付けたのですが、うまく行っていないという状況です。
https://koukoku-unyou.com/recruit/

[takawork]

実際に出力されたHTMLコードとは、「ページソースを確認」で表示されるものでよろしかったでしょうか？

[hatena19]

下記のCSSを追加してみてください。

.workstyle-copy-title {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

質問のCSSでは、position: fixed; が設定されてますので、その上に重ねるなら、テキストも fixed にする必要があります。

質問のHTMLのvideoタグをimgタグに変更してサンプルを作成してみましたので、参考にしてください。
https://codepen.io/hatena19/pen/gOwdKaM

[takawork]

ありがとうございます！position: fixed;に変更したらテキストが出てきたのですが、
質問文の画像のような格子状のオーバーレイが見えないままです。
サイトは今、
```
.workstyle-copy-title {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
を入れて更新した状態です。

[takawork]

今気づいたのですが、
```
.workstyle-copy-title {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
上記にすると画面をスクロールしても、常に真ん中にテキストが表示されるようになってしまいました...

[hatena19]

サンプル修正したので確認ください。
https://codepen.io/hatena19/pen/gOwdKaM

オーバーレイも position: fixed; に修正して、.workstyle-copy-title に z-index: 3; を追加しました。

[hatena19]

https://koukoku-unyou.com/recruit/ では動画背景は固定( fixed)ではないですが、結局、固定したいのか、固定したくないのかどっちなんですか。

[hatena19]

サンプルを背景動画は固定で、タイトルとメインのコンテンツはスクロールするようにしてみました。

https://codepen.io/hatena19/pen/gOwdKaM

[takawork]

何度もありがとうございます。やっと上手く表示することが出来ました！

Answer 2

flexboxは、ブロック要素のように振舞う親要素（display: flex）の中に、ブロック要素を入れて使う。ブロック要素の配置を制御する記法だからな。
だから、<p>しかないのにflexboxを使っても無駄。

<div class="myFlexbox">
  <p>Hello</p>
</div>

https://jsfiddle.net/0cpfvek7/