bootstrapのcarousel-captionを任意の位置に配置したい

bootstrapを使ってwebデザインをしようとしている初心者です。
carouselを使ってスライドショーさせている上にcarousel-captionで文字列を重ねたいのですが、cssで位置を指定しようとしても変化しません。
目標はスライドショーさせている画像の中央に配置することです

特にcarousel-captionについて、```cssコード

.carousel-caption {
    position: absolute;
    top: 1%;
    transform: translateY(-60%);
}

このtopにどんな数字でもいいのですが、入れないとタイトル、ボタンが表示されません。逆にどんな数字を入れても同じ所に表示されます。

どうしてcarousel-captionのtopの値を入れないと表示されないのか、逆にどんな値を入れても同じ所にしか表示されないのか、どうしたらcarouselの真ん中に文字列を置くことができるようになるのか教えていただきたいです。

以下現在書いているコードの抜粋です

html
1<section id="showcase">
2    <div id="myCarousel" class="carousel slide" data-ride="carousel">
3      <ol class="carousel-indicators">
4        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
5        <li data-target="#myCarousel" data-slide-to="1"></li>
6        <li data-target="#myCarousel" data-slide-to="2"></li>
7      </ol>
8      <div class="carousel-inner">
9        <div class="carousel-item carousel-image-1 active">
10          <div class="container">
11            <div class="carousel-caption">
12              <h1 class="display-3">タイトル</h1>
13              <a href="#" class="btn btn-danger btn-lg">Sign Up Now</a>
14            </div>
15          </div>
16        </div>

css
1.carousel-item {
2  height: 600px;
3  position: relative;
4}
5
6.carousel-item h1 {
7    font-size: 500%;
8    text-shadow: 1px 1px 15px #000;
9    color: #ffffff;
10}
11.carousel-image-1 {
12  background-image: url('img/image_demo.jpg');
13  background-size: cover;
14  background-position: center center;
15  position: relative;
16}
17
18.carousel-image-2 {
19  background-image: url('img/image2.jpg');
20  background-size: cover;
21  background-position: center top;
22}
23
24.carousel-image-3 {
25  background-image: url('img/image3.jpg');
26  background-size: cover;
27  background-position: center center;
28}
29.carousel-caption {
30    position: absolute;
31    top: 1%;
32    transform: translateY(-60%);
33}

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

回答1件

ベストアンサー

このtopにどんな数字でもいいのですが、入れないとタイトル、ボタンが表示されません。逆にどんな数字を入れても同じ所に表示されます。

コードの抜粋ではそのような動作にはなりませんでした。キャッシュにより変更が反映されていないか、見ているファイルが異なるか、適用している装飾に対してなんらかの勘違いがあるのではないでしょうか。

どうしたらcarouselの真ん中に文字列を置くことができるようになるのか

top, transform プロパティを使用することで質問者さんの実現したいことが行えます (動作確認用リンク)。

CSS
1.carousel-item {
2  height: 600px;
3  position: relative;
4}
5
6.carousel-item h1 {
7  font-size: 500%;
8  text-shadow: 1px 1px 15px #000;
9  color: #ffffff;
10}
11
12.carousel-image-1 {
13  background-image: url('http://placehold.jp/3d4070/ffffff/150x150.png?text=img/image_demo.jpg');
14  background-size: cover;
15  background-position: center center;
16  position: relative;
17}
18
19.carousel-image-2 {
20  background-image: url('http://placehold.jp/3d4070/ffffff/150x150.png?text=img/image2.jpg');
21  background-size: cover;
22  background-position: center top;
23}
24
25.carousel-image-3 {
26  background-image: url('http://placehold.jp/3d4070/ffffff/150x150.png?text=img/image3.jpg');
27  background-size: cover;
28  background-position: center center;
29}
30
31.carousel-caption {
32  position: absolute;
33  top: 50%;
34  transform: translateY(-50%);
35}