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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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;
    display:inline-block;
    float:none;
}
parent{
 width: 100%;
 height: 100%;
 margin-top: 504px;
 background-repeat: no-repeat;
 background-color: #F8F8F8;
 padding-bottom: 250px;
 overflow: auto;
 display: block;
 text-align:center;
}

我已经更新了这两个课程。将它应用到你的CSS中。

中心相对元素

2 个答案: