在页面上居中带边框的 div答案

【问题标题】：Centering div with border on the page在页面上居中带边框的 div
【发布时间】：2014-08-07 19:32:13
【问题描述】：

我需要在我的页面上居中 div。尺寸不固定。这是我为中心所做的工作

background-image: url(../img/icon.png);
    background-repeat:no-repeat;
    background-size:cover;
    border: 5px solid;
    border-radius: 10px;
    border-color: #ffffff;
    box-shadow: 0 10px 6px -3px black;;
    position: absolute;
    height: 85%;
    width: 82%;
    top: 7.5%;
    left: 9%;

如果我没有设置边框属性，这可以正常工作。如果我将其设置为 5px div 不再水平居中。我该如何解决这个问题？

【问题讨论】：

添加“box-sizing:border-box;”。因此边框不会扩展您的 div。 css-tricks.com/box-sizing
这是正确的答案。非常感谢您，我不确定我可以将其标记为答案，因为它是评论。
将其发布为答案，以便您标记它。
这看起来不像是在使 DIV 居中，而是对定位进行硬编码

标签： html css centering

【解决方案1】：

添加box-sizing: border-box;。因此边框不会扩展您的 div。

更多盒子尺寸：css-tricks.com/box-sizing

【讨论】：

更正这使 DIV 尺寸与包含的边框保持一致，但它无助于 DIV 居中。
但那是 OP 的问题。

【解决方案2】：

试试

margin-left:auto;
margin-right:auto;

另外，box-shadow: 0 10px 6px -3px black;; 不应该有第二个分号。

【讨论】：

margin-left:auto 和 margin-right:auto 不适用于 position:absolute 元素
就像 Edward 说的，使用 position:relative;

【解决方案3】：

试试这个：

.yourclass{
background:url(../img/icon.png) no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-0-background-size: cover;
border: 5px solid;
border-radius: 10px;
border-color: #ffffff;
box-shadow: 0 10px 6px -3px black;;
display: table;
margin: 0 auto;
height: 85%;
width: 82%;
vertical-align: middle;

只是说：当你使用背景方法时，你不需要输入像：“background-image”和“background-repeat：no-repeat”，你可以输入像“background:url(... ) no-repeat" - 使其更小、更有条理。

【讨论】：

使用边距时：0 auto；居中确保位置设置为相对。