画像に乗せる文字が中央に位置しない

画像に乗せる文字が中央に位置しないです。HTMLでBootstrapを使ってカルーセルを作りました。

<main>
            <div id="carousel-container">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img class="img-responsive" src="test1.jpg" alt="Arch">
                            <p>Test1</p>
                        </div>

                        <div class="item contain">
                            <img class="img-responsive" src="test2.jpg" alt="Nature">
                            <p>Test2</p>
                        </div>
                    </div>
                </div>
            </div>

        </main>

とhtmlに書いて、CSSには

.item p{
    position: absolute;
    color: black;
    font-weight: bold;
    font-size: 2em;
    top: 50%;
  　left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}
}

と書きました。HTMLを表示すると、Test1とTest2の文字が画像の左側に表示されています。親要素（ここではitemクラス）の上下左右の中央に配置するように書いたはずなのですが...。htmlは他にも要素が書いてあり、それらの配置はgrid-systemを使いCSSで配置しています。なぜこのように表示されてしまうのでしょうか？https://saruwakakun.com/html-css/reference/image-text の記事を参考にして作りました。