Question

我有一个绝对定位的元素，里面有内容。它可以是<h1>或少量<p>标记。所以我不知道内容的高度。

如何在绝对定位的div内将内容垂直居中？

HTML：

<div id="absolute">
    <div class="centerd">
    <h1>helo</h1>
    <span>hi again</span>
    </div>
</div>

CSS：

#absolute {
    position:absolute;
    top:10px;
    left:10px;
    width:50%;
    height:50%;
    background:yellow;
}

.centerd {
    display:table-cell;
    vertical-align:middle;
}

Fiddle

Answer 1

如果您向display:table div添加#absolute，您应该得到您想要的内容：

http://jsfiddle.net/3KTUM/2/

Answer 2

水平和垂直位置绝对中间。

＆＃13;

    function fetch(){
        return new Promise((resolve,reject)=>{
            let http = new XMLHttpRequest()
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                   resolve('this is line 1\nthis is line 2') // suppose this is your response from server
                }
            }
            http.open('GET','sample.txt',true)
            http.send()
        })
    }

    fetch()
    .then(data=>data.split('\n'))
    .then(delay())
    .then(delay())

    function delay(){
        return function(data){
            return new Promise(resolve=>{         
               setTimeout(()=>{console.log(data[0]);data.shift();resolve(data)},2000)
            })
        }  
    }

＆＃13;

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  -webkit-transform: translate(-50%, -50%);
}

＆＃13;

Answer 3

将您的#absolute div更改为也使用：

display:table;
vertical-align:middle;
text-align:center;

http://jsfiddle.net/3KTUM/4/

Answer 4

这也可以通过flexbox完成：

#absolute {
  align-items: center;
  display: flex;
  justify-content: center;
}

Answer 5

只需将div relative设为其absolute父级并使用text-align: center，如下所示：

.centerd {
    position: relative;
    width: 100%;
    text-align: center;
    /*display:table-cell;
    vertical-align:middle;*/
}

请参阅example fiddle

Answer 6

使用text-align：center或left：50％

在绝对定位的div中居中内容

6 个答案: