imgタグにpタグを真ん中に重ねたい

実現したいこと

<img>タグに<p>タグを真ん中に重ねたいんですけど
答えを見ても理解できない

発生している問題

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <header>
13    <div class="container">
14      <div class="header-left">
15        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
16      </div>
17      <div class="header-right">
18        <a href="#" class="login">ログイン</a>
19      </div>
20      
21    </div>
22  </header>
23  <div class="top-wrapper">
24    <div class="container">
25      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
26      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
27      <a href="#" class="btn signup">新規登録はこちら</a>
28      <p>or</p>
29      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
30      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
31    </div>
32    
33  </div>
34  <div class="lesson-wrapper">
35    <div class="container">
36      <div class="heading">
37        <h2>Learn Where to Get Started!</h2>
38      </div>
39        <div class="lessons">
40          <div class="lesson">
41            <div class="lesson-icon">
42              <img src="https://prog-8.com/images/html/advanced/html.png">
43              <p>HTML & CSS</p>
44              
45            </div>
46            <p class="txt-contents"></p>
47            
48          </div>
49          <div class="lesson">
50            <div class="lesson-icon">
51              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
52              <p>jQuery</p>
53              
54            </div>
55            <p class="txt-contents"></p>
56            
57          </div>
58          <div class="lesson">
59            <div class="lesson-icon">
60              <img src="https://prog-8.com/images/html/advanced/ruby.png">
61              <p>Ruby</p>
62              
63            </div>
64            <p class="txt-contents"></p>
65            
66          </div>
67          <div class="lesson">
68            <div class="lesson-icon">
69              <img src="https://prog-8.com/images/html/advanced/php.png">
70              <p>PHP</p>
71              
72            </div>
73            <p class="txt-contents"></p>
74            
75          </div>
76          
77        </div>
78        
79      
80      
81    </div>
82    
83  </div>
84  
85</body>
86</html>

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p, div {
4  margin: 0;
5  padding: 0;
6}
7
8body {
9  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
10}
11
12li {
13  list-style: none;
14}
15
16a {
17  text-decoration: none;
18}
19
20/* ここからCSSを書いていきましょう */
21.top-wrapper {
22  background-image: url(https://prog-8.com/images/html/advanced/top.png);
23  background-size: cover;
24  padding: 180px 0 100px 0;
25  color: white;
26  text-align: center;
27}
28.container {
29  width: 1170px;
30  margin: 0 auto;
31}
32.top-wrapper h1 {
33  font-size: 45px;
34  opacity: 0.7;
35  letter-spacing: 5px;
36}
37.top-wrapper p {
38  opacity: 0.7;
39  margin-bottom: 15px;
40}
41.signup {
42  background-color: #239b76;
43  margin-top: 15px;
44  margin-bottom: 15px;
45}
46.facebook {
47  background-color: #3b5998;
48  margin-right: 10px;
49}
50.twitter {
51  background-color: #55acee;
52}
53.btn {
54  padding: 8px 24px;
55  display: inline-block;
56  color: white;
57  opacity: 0.8;
58  border-radius: 4px;
59}
60.btn:hover {
61  opacity: 1;
62}
63.fa {
64  margin-right: 5px;
65}
66header {
67  height: 65px;
68  background-color: rgba(34, 49, 52, 0.9);
69  width: 100%;
70  position: fixed;
71  top: 0;
72  z-index: 10;
73}
74.header-left {
75  float: left;
76}
77.logo {
78  width: 124px;
79  margin-top: 20px;
80}
81.header-right {
82  float: right;
83  background-color: rgba(255, 255, 255, 0.3);
84  transition: all 0.5s;
85}
86.header-right:hover {
87  background-color: rgba(255, 255, 255, 0.5);
88}
89.login {
90  color: white;
91  padding: 0 25px;
92  line-height: 65px;
93  display: block;
94}
95.lesson-wrapper {
96  height: 580px;
97  background-color: #f7f7f7;
98  text-align: center;
99}
100.heading {
101  color: #5f5d60;
102  padding-top: 80px;
103  padding-bottom: 50px;
104}
105.heading h2 {
106  font-weight: normal;
107}
108.lesson {
109  float: left;
110  width: 25%;
111}
112.lesson-icon {
113  position: relative;
114}
115.lesson-icon p {
116  position: absolute;
117}

疑問点

プロゲートの道場コース中級編をやっているのですが
答えを見たらCSSが
.lesson-icon {
position: relative;
}
+
.lesson-icon p {
position: absolute;
top: 44%;
width: 100%;
color: white;
}
こうなっていました。
どうしてtop: 44%;
width：100％;
にすると真ん中になるのですか？
教えて頂けると嬉しいです。

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

回答2件

ベストアンサー

HTMLの構成がそれでいいかどうか微妙ですが

CSS
1.lesson-icon{
2display:inline-block;
3position:relative;
4margin:0px;
5}
6.lesson-icon p{
7margin:0px;
8position:absolute;
9top:calc(50% - 0.5em);
10width:100%;
11text-align:center;
12}