html - 无法在响应中居中元素

Question

我建立了一个基本的网络，并试图使其具有响应性，但是滑块本身存在一些问题；当我调整屏幕大小时，某些元素不会居中；我以为是因为 Firefox，但我在 chrome 上尝试过，结果是一样的。

滑块是：

<div id="slider" class="slider-big">
  <div class="vertical-relative-centered">
     <h1>Welcome everyone!!!</h1>
     <a href="#" class="btn-white">Ir al Blog</a>
  </div>
</div>

和CSS：

#slider {
    width: 100%;
    height: 350px;
    /* line-height: 320px; */
    color: #fff;
    text-shadow: 0 0 5px #444;
    overflow: hidden;
    
    
    background: rgba(73,155,234,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );    
}

#slider h1 {
    margin: 0;
    padding: 0;
    text-align: center;
}

.btn-white {
    display: inline-block;
    color: rgb(88, 88, 88);
    background-color: white;
    padding: 10px;
    margin: auto;
    margin-top: 40px;
    font-size: 18px;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: 0 0 5px rgb(88, 88, 88);
    border-radius: 4px;
    transition: 300ms all;
}

.btn-white:hover {
    background-color: #444;
    color: white;
}

问题是当我调整屏幕大小时 h1 向左移动，所以我的解决方案是添加一个溢出：隐藏到#slider，它工作得很好，但我遇到了另一个问题，这是因为溢出，滑块没有调整大小时不要粘在标题上；然后，我删除了溢出并尝试使用 translateX() 将其水平居中，但 h1 忽略了它。

所以，最后，我不知道如何以正确的方式使元素居中，同时让滑块粘在标题上。

如果您需要，这是完整的代码：https ://jsfiddle.net/ilos28/t9ouea7v/

提前致谢。

- - - - - - - 添加 - - - - - - - -

这就是区别，当我改变屏幕的宽度时：

前：

后：

标签： htmlcssresponsive-design

Answer 1

In the end I just had to set a height 100% in the #menu and the space disappeared.