垂直和水平居中對齊文本

Question

我的網站上有2個街區。

我想在兩個區域的中央垂直和水平對齊文本。 現在它位於下面：(

這是我當前的代碼：

https://jsfiddle.net/byp0pevr/

 .text-block div { width: 100%; display: inline-block; vertical-align: middle; line-height: 1; position: relative; color: black; z-index: 5; } #adbox1 { width: 300px; height: 620px; position: absolute; top: 0; left: 10px; } #adbox2 { width: 300px; height: 300px; position: absolute; top: 0; left: 320px; } .image-holder { display:inline-block; position: relative; } .image-holder:after { content:''; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; display: block; position: absolute; background: black; opacity: 0; } .image-holder:hover:after { opacity: 0.1; } 

 <div id="adbox1" class="image-holder"> <img src="http://placehold.it/300x620" title="1"> <div class="text-block"> <div>Some<br>Text</div> </div> </div> <div id="adbox2" class="image-holder"> <img src="http://placehold.it/300x300" title="1"> <div class="text-block"> <div>Some<br>Text</div> </div> </div> 

Answer 1

給出position: relative; 到#adbox1並輸入以下CSS。

.text-block {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

工作小提琴