如何垂直对齐与定义宽度/高度一个div的内容的中心？如何垂直对齐与定义宽度/高度一个div的内容的中

这将是垂直居中在限定的宽度/高度的任何内容的正确方法div 。

在例子有两个内容不同的高度，什么是使用类既中心垂直的最好方式.content 。 （和它的作品每一个浏览器和无解table-cell ）

对心中有些解决方案，但是想知道其他的想法，一个是使用position:absolute; top:0; bottom: 0; position:absolute; top:0; bottom: 0; 和margin auto 。

Answer 1:

我研究这一点，从我发现你有四个选项：

版本1：家长分度显示为表格单元

如果你不介意使用display:table-cell上你的父母DIV，可以使用下列选项：

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

现场演示

---

版本2：父DIV与显示块和内容显示表小区

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

现场演示

---

第3版：家长DIV浮动和内容DIV为显示表细胞

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

现场演示

---

第4版：相对与内容位置绝对父DIV位置

我曾与这个版本唯一的问题是，它似乎你将不得不创造每一个具体实现的CSS。 这样做的原因是内容的div需要有设定高度，你的文字将填补和边距会想通关的那个。 这个问题可以在演示中看到。 你可以得到它的每一个场景手动更改内容div的高度％和-0.5乘以它让你的上边距值工作。

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

现场演示

Answer 2:

我发现这个在这个解决方案的文章

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

它的工作就像一个魅力，如果元件的高度是不固定的。

Answer 3:

这也可以用做display: flex只用几行代码。 下面是一个例子：

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

现场演示

Answer 4:

保证金：all_four_margin

通过提供50％至all_four_margin将元件放置在中心

style="margin: 50%"

你可以申请它下面太

保证金：右上左下

保证金：右上和左下

保证金：顶部和底部右侧及左

通过给予适当％，我们得到的地方，我们想要的元素。

文章来源: How to vertically align into the center of the content of a div with defined width/height?