align icon before H1 centered - html

Question

I'm trying to center the icon before the block of text so that if the text contains one word or multiple lines it will always be vertically centered before the block of text.
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
}
.headline::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 60px;
height: 60px;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas/h1>
</div>

Answer 1

Try it this way.
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') no-repeat;
background-size: 60px 60px;
background-position: 0 center;
}
<div class="box">
<h1 class="headline">Headline: etiam porta sem male suada magna</h1>
</div>

Answer 2

Use top: calc(50% - 30px); here 30 = height/2;
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 0 0 70px;
font-size: 22px;
line-height: 1.5;
margin:: 40px 0;
color: #000;
}
.headline::before {
content: '';
position: absolute;
left: 0;
top: calc(50% - 30px);
width: 60px;
height: 60px;
background: url('http://icons.veryicon.com/ico/Internet%20%26%20Web/Browsers%202/Google%20Chrome.ico') top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas</h1>
</div>

Answer 3

Something like this are you looking for ?
.box {
padding: 20px;
height: auto;
width:30%;
}
.headline {
position: relative;
padding: 0 10px;
font-size: 22px;
line-height: 1.5;
margin: 40px 0;
color: #000;
width: 100%;
}
.headline::before {
content: '';
position: absolute;
right: 0;
margin: auto;
left: 0;
bottom: 0;
top: 0;
width: 60px;
height: 60px;
background: url(https://markwarrick.com/wp-content/uploads/2014/07/sample-icon.png) top right no-repeat;
background-size: cover;
}
<div class="box">
<h1 class="headline">Headline: your address is blalalaslsakdlpdslasddas</h1>
</div>