小编典典

如何垂直对齐具有定义的宽度/高度的div内容的中心?

html

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

在示例中,有两个具有不同高度的内容,什么是使用class垂直居中的最佳方法.content?(并且适用于所有浏览器,而没有的解决方案table-cell

想到了一些解决方案,但想知道其他想法,一个正在使用position:absolute; top:0; bottom: 0;margin auto


阅读 402

收藏
2020-05-10

共1个答案

小编典典

我对此进行了一些研究,从中发现您有四个选择:

版本1:父div,显示为表格单元

如果您不介意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的高度百分比并将其乘以-.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;
}​
2020-05-10