css - 居中相关元素

Question

我有一个相关按钮

button {
    width: 305.4px;
    height: 60px;
    background: #E43B40;
    margin-top: 109.5px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    cursor: pointer;
    border: 0px;
    outline: none;
    font-family: Roboto Bold;
    font-size: 16px;
    color: #FFFFFF;
    position: relative
}

我试图将它置于屏幕中央。但它卡在同一个地方，边距不影响它。该按钮的父元素为div，样式如下:

parent {
     width: 100%;
     height: 100%;
     margin-top: 504px;
     background-repeat: no-repeat;
     background-color: #F8F8F8;
     padding-bottom: 250px;
     overflow: auto;
     display: block;
}

这可能是什么原因造成的？演示是 here

Answer 1

html,
body {
  height: 100%;
}
body {
 margin: 0;
}
.button {
    width: 305.4px;
    height: 60px;
    background: #E43B40;
    display: inline-block;
    cursor: pointer;
    border: 0px;
    outline: none;
    font-family: Roboto Bold;
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.parent{
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-color: #F8F8F8;
     text-align: center;
}

<div class="parent">
    <button class="button" type="button">Button</button>
</div>