"vertical-align:middle;" is not working inside td - html

Question

I don't understand. This is a very simple document and I can't see any reason it shouldn't work.
CSS:
.button {
background-color: transparent;
border-radius: 50%;
border: 5px solid #ff0099;
display: table-cell;
vertical-align: middle;
height: 175px;
width: 175px;
text-decoration:none;
text-align: center;
word-wrap: break-word;
}
.button:hover {
text-decoration: underline;
}
.button p {
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
}
table {
border-spacing: 20px 10px;
border-collapse: separate;
}
td {
vertical-align:middle;
}
HTML:
<table>
<tr>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
</tr>
</table>
As far as I know, vertical-align was meant for use in td's, so I'm not sure why it isn't working.

Answer 1

Add below code to button css . Refer http://jsbin.com/kixewufe/2/ to view http://jsbin.com/kixewufe/2/edit?html,css,output to view complete code.
vertical-align:middle;
display:inherit;

Answer 2

The <td> content is indeed vertically-aligned. The problem is that the content is the <a> tag that is consuming all the available height and its own content (which is the <p> paragraph) is not vertically aligned.
Try to align the <a> tag as well:
.button {
display: table-cell;
vertical-align: middle;
}

Answer 3

Try using this code instead. It lays the button class over the text (which is vertical-align:middle;) and uses absolute positioning to position the button class on the table cell.
I apologize, I cannot add a jsfiddle at this time because they are experiencing some issues, however, if you copy - paste the code below you will see you get (what I believe is) your desired result.
HTML
<table>
<tr>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
<td>
<p>Insert text here, enough to push it over the edge</p>
</td>
</tr>
</table>
CSS
.button {
background-color: transparent;
border-radius: 50%;
border: 5px solid #ff0099;
height: 175px;
width: 175px;
position:absolute;
top:0px;
left:0px;
}
td p {
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
text-align:center;
text-decoration:none;
width:170px;
margin-left:6px;
}
table {
border-spacing: 20px 10px;
border-collapse: separate;
}
td {
position:relative;
width:180px;
height:180px;
vertical-align:middle;
}

Answer 4

Because none of these solutions worked for me, I found the following solution on StackOverflow. As far as I can tell this also works flawlessly with Bootstrap 4.
td {
display: flex;
align-items: center;
}