Nội dung trung tâm ở vị trí tuyệt đối div

Question

Tôi có một yếu tố vị trí tuyệt đối với nội dung bên trong. Nó có thể là <h1> hoặc một vài thẻ <p>. Vì vậy, tôi không biết chiều cao của nội dung.

Làm cách nào để có thể theo chiều dọc ở giữa nội dung bên trong vị trí tuyệt đối 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

nếu bạn thêm display:table để #absolute bạn div bạn sẽ nhận được những gì bạn muốn:

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

Answer 2

Thay đổi #absolute div của bạn cũng sử dụng:

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

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

Answer 3

Chỉ cần chắc div relative để absolute mẹ của nó và sử dụng text-align: center, như thế này:

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

Xem example fiddle

Answer 4

sử dụng text-align: center hoặc trái: 50%

Answer 5

Điều này có thể được thực hiện với flexbox quá:

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

Answer 6

ngang và dọc vị trí trung tuyệt đối.

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

<div class="obj"> 
 
    <div class="center">Test</div> 
 
</div>