[iamnotactiveanymore]

So i am currently working on a site and have been stuck on this for one hour, why doesnt the text go to the center of the image

Code

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Welcome to my website!</title>
        <link rel="stylesheet" href="stylesheet.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-attachment: fixed;
    margin:0px;
}
* {
    font-family:ProximaNovaRegular, sans-serif;
}
ul{
    list-style-type:none;
    background-color:#333333;
    line-height: 1.8;
    -webkit-padding-start: 0px;
    margin: 0px;
    height:100%;
    width: 100%;
    padding:0px;
    overflow: hidden;
}
li{
    color:white;
    float:top;
    display:inline-block;
    width:100px;
    height:100%;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
    padding:0px;
    white-space: nowrap;
}
.sel{
    font-size:48px;
    text-align:center;
}
.sel:hover{
    background-color:white;
    color:black;
    cursor:pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
header{
    background-color:white;
    border-bottom:1px solid black;
    }
nav{
margin-top: 0px;
}
h1{
    padding-top:0px;
    margin:0px;
    font-weight:normal;
}
#logo{
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    float:left;
    font-size: 40px;
    font-weight:100;
}
#free{
    border: 1px #3da2f5;
    border-radius: 10px;
    background-color:#35c903;
    font-weight: 500;
}
img{
    height:300;
    width:300;
}
.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
    </head>
    <body>
            <!--Logo-->
            <nav>
                <ul>
                    <h1>
                          <li id="logo">QuickAnd<span id="free">Free</span>.com</li>
                      </h1>
                </ul>
            </nav>
            <div class="container">
  <img src="https://lh6.ggpht.com/1eVPA6Iukw-F4i5xq1ZWicaKBzmprLGw98YhdG20E-wlsHHg3PcKJqbY_fWLdJeGRw=w300" alt="Avatar" class="image">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
    </body>
</html>

Also, i am not good at css just started learning html and css a week ago.

[Bluffer]

Which part is it you are talking about?

[Jdxo]

You should provide screenshots of your browser so we can at least guess what you are trying to achieve.

[ｋａ＄ｈ]

If you are referring to "John Doe" not hovering over the image, it is centering based upon the width of the parent div, which is 50% wide. You should make your container the same size as your image and then have another wrapper div around that.