Jquery 在固定尺寸div中水平和垂直对中内容

我想有如下内容
对于第一个，我使用了线高度40px

对于第二个，我使用了线高度120px

这意味着随着内容的变化，我必须更改线条高度 有没有办法使这种类型的定心在一个固定尺寸的div中，而没有 更改课程

我可以在没有Javascript的情况下完成这项工作吗？ 如果我使用高度为120px，我会得到像这样的div s（我不想要这个）

div的样式是

<style>
 .rectangle {
        postion:absolute;
    box-shadow: 10px #333;
    border-radius: 23px;
    border-top-right-radius: 0;
    border:6px solid;
    block:inline;
    line-height: 123.6px;
    width:200px;
    background-color: #444;
    float: left;
    margin: 5px;
    text-align: center;
    color:white;
   font-weight:900;

    text-decoration:none;
}
</style>

.矩形{
职位：绝对职位；
盒影：10px#333；
边界半径：23px；
边框右上角半径：0；
边界：6px固体；
块：内联；
线高：123.6px；
宽度：200px；
背景色：#444；
浮动：左；
保证金：5px；
文本对齐：居中；
颜色：白色；
字号：900；
文字装饰：无；
}

垂直定心很棘手。CSS tricks的克里斯·科伊尔（Chris Coyier）在这方面有一篇很棒的文章-

我个人的偏好是ghost伪元素，但它仅在IE8+中可行，因此如果需要传统IE支持，您可能需要查看其他一些示例

---

这里有一个工作的fiddle-

Make.rectangle元素显示为table，内部文本段落显示为table单元格。然后你可以很容易地垂直定位你的段落

---

下面是一个工作示例：

即使div中的高度和内容不同，下面的css也能正常工作

.rectangle 
      {
        height:auto;
        postion:absolute;
        box-shadow: 10px #333;
        border-radius: 23px;
        border-top-right-radius: 0;
        border:6px solid;
        block:inline;
        width:200px;
        background-color: #444;
        float: left; padding:20px 10px 20px 10px;
        margin: 5px;
        text-align: center;
        color:white;
        font-weight:900;
        text-decoration:none;
    }

---

垂直对齐仅在表>tr>td中工作正常。对于其他人，你也可以尝试从顶部和底部填充。这不需要任何垂直对齐，效果最好

谢谢

---

Rahul

我们能看到你所做的代码吗…？谢谢你的评论。我已经添加了css样式的注释，这在IE7及以下版本中不起作用，IE8在

显示：表格中表现出奇怪的行为随着内容的增加，div的高度也在增加，对于IE7及以下版本也是如此；IE8需要一个！DOCTYPE。Madhu13，你期望什么？block:inline用于将block元素更改为inline元素block:inline？没有这样的财产。可能显示：block；，显示：内联块；