将链接放置在 div 的中间（水平/垂直）答案

【问题标题】：Placing link in the middle (horizontally/vertically) inside the div将链接放置在 div 的中间（水平/垂直）
【发布时间】：2014-01-09 17:27:38
【问题描述】：

我需要将 div 内的链接垂直和水平居中。

我的 CSS：

    .div {
       display:block;
       background:red;
       width:162px;
       height:168px;
    }
    .span { }
    .link { }

我的 HTML：

    <div class="div">
       <span class="span">
          <a href="#" class="link"> Text in middle </a>
       </span>
    </div>

链接：http://jsfiddle.net/pjWUC/

【问题讨论】：

标签： html css vertical-alignment text-alignment

【解决方案1】：

根据您示例中的编码，使用：

Updated jsFiddle example - a 元素垂直和水平居中。

.div {
    display:table;
    background:red;
    width:162px;
    height:168px;
}
.span {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

【讨论】：

It works in IE8, no lower. 你需要在 IE7 中工作的东西吗？
是的，我也需要 IE7 支持。我相信它会通过 display: inline-block; 来完成。 ?通过在css属性前添加*来定位IE7及更低版本是否可以？

【解决方案2】：

.div {
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    ...
}

很遗憾，根据this，IE 不支持 display:table-cell。

【讨论】：

为什么不呢？您没有指定任何进一步的要求。
因为这会使文本水平居中而不是垂直居中。自己试试吧。。
我很抱歉。我省略了 display: 部分和浏览器兼容性信息。已编辑。