将元素保持在div的中心

Question

我正在创建一个需要响应的网页。

这是它的图像：

这是HTML：

        <div class="smallBoxes">
            <div class="leftHomeBox">

                <a class="Description" id="Desc_1">WHEN?</a>
            </div>  
        </div>      

和CSS：

.smallBoxes{
    display:block;
    margin-left:25%;
    margin-right:20%;
    width:auto;
}

.leftHomeBox{
    width:100%;
    float:left;
    margin-bottom:10px;
    padding:10px;
    padding-bottom:0;
    height:65px;
}


.Description{
    border:5px solid #ffffff;
    padding:5px;
}

对于所有屏幕尺寸，我都试图将“何时”框保持在div的中心。 就像现在一样，两个边距都将发生变化，但是以不同的速率变化，例如，它们彼此之间相对不一致，因此“何时”框不会保持居中。

我看过其他网站，却找不到有效的示例。

我尝试使用

margin-left:20%;
margin-right:20%;
width:auto;

但这不起作用。 我整天都在努力，已经阅读了所有可以找到的内容，但似乎无法正常工作。 我已经尝试过所有可能想到的事情。

当然，这是经常需要的，并且很难实现，但是对于如何实现这一目标，或者我做错了什么，我无法找到明确的答案。

如果有人能够提供一个可行的解决方案，我将不胜感激。

Answer 1

采用

的CSS

.leftHomeBox{
text-align:center
}

演示

Answer 2

.Description
{
 display:block;
 margin-left:auto;
 margin-right:auto;
}

这应该是可行的。

Answer 3

您可以将文本对齐：放在<a>标记的中心。

.leftHomeBox{
  text-align:center
}

它将使链接居中而不使用边距