Css 垂直居中<；部门>；有多行的

我知道这已经被问了好几次了，但是在玩了一会儿之后，我仍然不能集中我需要的东西。我要做的是将这些按钮垂直放置在页面的中心。我想把居中的文字也放在上面

我的（草率的）代码：

HTML:

---

您可以在div上设置以下规则：

div {
  position: absolute;
  left: 50%;
  height: 50%;
  margin-top: -(height of div);
  margin-left: -(width of div);
}

下面的链接示例：

检查以下内容：

您可以更改截面的宽度、高度和边距属性以获得不同的结果

HTML

<div>
<section>
<a href="#" id= "mail" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
</section>
</div>

---

这里有一种方法，假设您希望按钮在页面上水平和垂直居中

HTML是：

<div class="wrap">
    <div class="button-wrap"> 
        <a href="#" id="mail" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
    </div>
</div>

您需要将body和html元素的width和height属性声明为100%，对于

div.wrap

，也是如此

诀窍是在

div.button-wrap

中包装链接/按钮，该链接/按钮绝对位于和指定的特定宽度和高度值，以匹配按钮。60px的高度基于

.cbtn

的高度，350px的宽度为5倍（60px+2x2px+2x1px+4x1em），约为350px。但是，由于我们可以使用

text align:center

对内联块进行居中，因此精确的宽度并不太重要，只需使其足够宽即可

通过将所有位置值设置为0（左/右/上/下），然后设置

margin:auto

，居中工作

这都是基于CSS 2.1的，所以它应该可以在大多数浏览器中使用。唯一的限制是内联块属性，IE7无法识别该属性

然而，由于您使用的是CSS2动画，内联块可能还可以

小提琴参考：

---

整版浏览：

谢谢您的回答。我显然对此很陌生，但我假设div的当前大小是64px（高），312px（宽），因为有5个按钮（每个按钮60x60px），还有2px的边距。不过，填充这些尺寸并没有使其居中。我修改了代码，遇到了另一个问题。我希望按钮上方的文本大小为96px，但这会在水平居中时出现问题。它的位置不正确，因为（我认为）左边距禁止它比按钮本身更左。我开始胡闹，但找不到一个简单的解决办法。

<div>
<section>
<a href="#" id= "mail" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
</section>
</div>

    div {
    text-align: center;
    height:400px;
    width:100%;
    border:2px #000 solid;
}

a {
    text-align: center;
    margin: auto;
}

div section {
     width:65%;
    height:50%;
    margin:20% auto;
}


.cbtn {
    display:block;
    width:60px;
    height:60px;
    border-radius:50px;
    background:transparent;
    border: solid gray 1px;
    margin: 2px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
    float:left;
}

.cbtn:hover {
    text-decoration:none;
    background:#F3734F;
}

#mail {
        background-image:url(http://data.novicode.com/data/img/mail.png);
    background-position:50% 50%;
    background-repeat:no-repeat;
}

<div class="wrap">
    <div class="button-wrap"> 
        <a href="#" id="mail" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
    </div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrap {
    height: 100%;
    width: 100%;
}

.button-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 60px;
    width: 350px;
    margin: auto;
    text-align: center;
}