2013-04-26 16 views
11

Mam element umieszczony absolutnie z zawartością w środku. Może to być <h1> lub kilka tagów <p>. Więc nie znam wysokości zawartości.Zawartość środkowa w div o bezwzględnej pozycji

Jak mogę wyśrodkować w pionie zawartość wewnątrz absolutnie ustawionego 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

Odpowiedz

11

jeśli dodać display:table do #absolute div powinien dostać co chcesz:

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

+0

nie wyśrodkować zawartość .. to właśnie sprawia, że ​​zawartość * * zacząć od centrum –

+0

@ExplosionPills wydaje wyśrodkować zawartość dla mnie - spróbuj dodać więcej treści i ci zobaczy, że pozostaje wyrównany w pionie, nie zaczyna się od środka. Możesz myśleć, że zaczyna się w centrum, ponieważ h1 będzie miał naturalne dopełnienie, które popycha – Pete

2

Tylko div relative jego absolute rodzica i używać text-align: center coś takiego:

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

Zobacz example fiddle

1

Zastosowanie text-align: center lub w lewo: 50%

1

Można to zrobić ze schematu flexbox też:

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

pozioma i pionowa pozycja absolutna środkowy.

.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>

Powiązane problemy