如何垂直对齐定义宽度/高度的div内容的中心？ [英] How to vertically align into the center of the content of a div with defined width/height?

问题描述

垂直居中定义宽度/高度的内容的正确方法是什么？ div 。

在示例中，有两个高度不同的内容，使用类 .content 。 （它适用于每个浏览器，并且没有 table-cell 的解决方案）但想知道其他想法，一个是使用 position：absolute;顶部：0; bottom：0; 和 margin auto 。

解决方案

我已经研究了这一点，从我发现你有四个选择：

版本1：父div与显示为表格单元

如果您不介意在父div上使用 display：table-cell ，则可以使用以下选项：

  .area {
 height：100px; 
 width：100px; 
背景：红色; 
 margin：10px; 
 text-align：center; 
 display：table-cell; 
 vertical-align：middle; 
} 
  

直播DEMO

---

版本2：内容显示表单元

  .area {
 height：100px; 
 width：100px; 
背景：红色; 
 margin：10px; 
 text-align：center; 
 display：block; 
} 
 
 .content {
 height：100px; 
 width：100px; 
 display：table-cell; 
 vertical-align：middle; 
} 
  

直播DEMO

---

版本3：父div浮动内容div as display table-cell

  .area {
 background：red; 
 margin：10px; 
 text-align：center; 
 display：block; 
 float：left; 
} 
 
 .content {
 display：table-cell; 
 vertical-align：middle; 
 height：100px; 
 width：100px; 
} 
  

直播DEMO

---

版本4：位置绝对

我对这个版本的唯一问题是，您似乎必须为每个特定的实现创建css。其原因是内容div需要有你的文本将被填充的高度，而margin-top将会被忽略。这个问题可以在演示中看到。您可以通过改变内容div的高度％并将其乘以-.5来获得您的边际值，从而手动为每种情况工作。

  .area {
 position：relative; 
 display：block; 
 height：100px; 
 width：100px; 
 border：1px纯黑色; 
背景：红色; 
 margin：10px; 
} 
 
 .content {
 position：absolute; 
 top：50％; 
身高：50％; 
 width：100px; 
 margin-top：-25％; 
 text-align：center; 
} 
  

现场DEMO

What would be the correct method to vertically center any content in a defined width/height div.

In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)

Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.

解决方案

I have researched this a little and from what I have found you have four options:

Version 1: Parent div with display as table-cell

If you do not mind using the display:table-cell on your parent div, you can use of the following options:

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

Live DEMO

---

Version 2: Parent div with display block and content display table-cell

.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;    
}​

Live DEMO

---

Version 3: Parent div floating and content div as display table-cell

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

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

Live DEMO

---

Version 4: Parent div position relative with content position absolute

The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.

.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;
}​

Live DEMO

这篇关于如何垂直对齐定义宽度/高度的div内容的中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！