Css hoe div-inhoud te centreren. Methoden voor verticale middenuitlijning in CSS

Hallo! We blijven de basis van de HTML-taal beheersen. Laten we eens kijken wat u moet schrijven om de tekst uit te lijnen met het midden, de breedte of de randen.

Laten we, om ter zake te komen, eens kijken hoe u tekst in HTML op drie verschillende manieren kunt centreren. De laatste twee zijn direct gekoppeld aan het stylesheet. Het kan een CSS-bestand zijn dat verbinding maakt met de pagina's van de site en hun uiterlijk definieert.

Methode 1 - direct werken met HTML

Het is eigenlijk heel simpel. Zie voorbeeld hieronder.

Lijn de alinea uit met het midden.

Als u tekstfragmenten op een andere manier wilt verplaatsen, voert u in plaats van de parameter “center” de volgende waarden in:

uitvullen – tekst uitlijnen op de breedte van de pagina;
rechts – aan de rechterkant;
links - naar links.

Naar analogie kunt u de inhoud in de headers (h1, h2) en container (div) verplaatsen.

Methode 2 en 3 - stijlen gebruiken

Het hierboven gepresenteerde ontwerp kan enigszins worden getransformeerd. Het effect zal hetzelfde zijn. Om dit te doen, moet je de onderstaande code schrijven.

Tekstblok.

In deze vorm wordt de code rechtstreeks in de HTML geschreven om de tekstinhoud te centreren.

Er is een andere alternatieve manier om resultaten te bereiken. U moet een paar stappen uitvoeren.

Stap 1. Schrijf in de hoofdcode
Tekstmateriaal.

Stap 2. Voer in het meegeleverde CSS-bestand de volgende code in:

Rovno (tekst uitlijnen: centreren;)

Ik merk op dat het woord "rovno" slechts de naam is van een klasse die anders kan worden genoemd. Dit wordt overgelaten aan het oordeel van de programmeur.

Naar analogie kunt u in HTML eenvoudig tekst gecentreerd, uitgevuld en uitgelijnd aan de rechter- of linkerrand van de pagina maken. Zoals u kunt zien, zijn er veel meer dan één optie om uw doel te bereiken.

Even een paar vragen:

Doet u een non-profit informatieproject?
Wilt u dat uw website goed scoort in zoekmachines?
Wilt u online inkomsten verdienen?

Als alle antwoorden positief zijn, kijk dan eens naar een geïntegreerde aanpak voor website-ontwikkeling. De informatie zal vooral nuttig zijn als deze op het WordPress CMS draait.

Ik wil erop wijzen dat uw eigen websites slechts een van de vele mogelijkheden zijn om passief of actief inkomen op internet te genereren. Mijn blog is gewijd aan financiële mogelijkheden online.

Heeft u ooit gewerkt op het gebied van verkeersarbitrage, copywriting of andere activiteiten die door samenwerking op afstand primaire of extra inkomsten genereren? Je kunt dit en nog veel meer nu leren op de pagina's van mijn blog.

Ik zal in de toekomst veel echt nuttige informatie publiceren. Blijf verbonden. Als u wilt, kunt u zich per e-mail abonneren op Workip-updates. Het abonnementsformulier vindt u hieronder.

De lay-out en uitlijning in het midden van websitepagina's is een creatieve onderneming en veroorzaakt vaak problemen voor beginners. Laten we dus kijken hoe we het moeten doen. Laten we zeggen dat we een pagina willen maken met de volgende structuur:

Onze pagina bestaat uit vier blokken: koptekst, menu, inhoud en voettekst. Om de pagina te centreren, plaatsen we deze vier blokken in één hoofdblok:

Sitekop

Inhoud

Onderaan de site

Met deze structuur als voorbeeld zullen we verschillende opties overwegen.

Lay-out en centrering van een rubbersite

Bij het aanleggen van een rubberlocatie is de belangrijkste meeteenheid -%, omdat de locatie zich over de breedte moet uitstrekken en alle vrije ruimte in beslag moet nemen.

Daarom zal de breedte van de blokken "koptekst" en "voettekst" 100% van de schermbreedte zijn. Laat de breedte van het "menu"-blok 30% zijn, en het "inhoud"-blok moet zich naast het "menu"-blok bevinden, d.w.z. het moet een linkermarge hebben (marge-links) met een breedte gelijk aan de breedte van het "menu"-blok, d.w.z. 30%.

Om de blokken "menu" en "inhoud" naast elkaar te laten zitten, laten we het blok "menu" zwevend maken en naar de linkerrand duwen. We zullen ook de achtergrondkleuren voor onze blokken instellen. Laten we dit nu allemaal in het stijlblad schrijven (op de style.css-pagina)

#header( achtergrond:#3e4982; breedte:100%; hoogte:110px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:24px; opvulling-top:40px; ) #menu( achtergrond:#6173cb; float :left; breedte:300px; tekst-uitlijning:center; lettergrootte:18px; #content(achtergrond:#ffffff; marge-links:30%; hoogte:300px; tekst-uitlijning:center; ) #footer(achtergrond: #3e4982; helder: beide; breedte: 100%; hoogte: 50 px; tekst uitlijnen: midden; kleur: #FFFFFF;

De hoogte van de blokken werd voorwaardelijk ingesteld zodat het resultaat zichtbaar was. Bekijk onze pagina in uw browser:

Als u de grootte van het browservenster wijzigt, verandert de breedte van alle blokken. Dit is niet altijd handig, omdat... Wanneer het menublok wordt uitgerekt, verschijnt er lege ruimte. Daarom staat de breedte van het “menu”-blok vaak vast, dus laten we hetzelfde doen. Om dit te doen, vervangt u de waarden van de overeenkomstige eigenschappen in het stijlblad:

... #menu( achtergrond:#6173cb; float:left; breedte:200px; hoogte:300px; ) #content( achtergrond:#ffffff; margin-left:200px; hoogte:300px; ) ...

Nu strekt onze pagina zich natuurlijker uit. Dankzij de vloeiende lay-out beslaan pagina's de gehele breedte van het scherm, zodat pagina-uitlijning niet nodig is.

Maar als u wilt, kunt u ervoor zorgen dat uw pagina links en rechts van het scherm gelijke opvulling heeft. Om dit te doen, moet je een stijl toevoegen aan het "hoofdblok", dat een container is voor alle andere blokken:

Onze pagina ziet er nu zo uit:

Indeling en centrering van de site, vaste breedte

In dit geval zullen we vaste afmetingen voor onze blokken moeten instellen:

#main( breedte:800px; ) #header( achtergrond:#3e4982; breedte:800px; hoogte:150px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:24px; opvulling-top:40px; ) #menu ( achtergrond:#6173cb; float:left; breedte:200px; hoogte:300px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:18px; opvulling-top:10px; ) #content( achtergrond:#ffffff; marge-links:200px; hoogte:300px; tekst-uitlijnen:center; ) #footer( achtergrond:#3e4982; helder:beide; breedte:800px; hoogte:50px; tekst-uitlijnen:center; kleur:#FFFFFF; lettertype- maat:14px; opvulling bovenaan:10px)

Nu wordt onze pagina tegen de linkerrand van het scherm gedrukt.

In dit geval kan de centrale uitlijning van sitepagina's als volgt worden uitgevoerd. Laten we niet vergeten dat onze pagina een "body"-tag heeft, die ook een breedte en wat opvulling kan krijgen.

Laten we dit doen: geef de "body"-tag een breedte van 800 pixels (zoals het "hoofd"-blok) en een opvulling links van 50%. Vervolgens wordt de volledige inhoud van het "hoofdblok" aan de rechterkant van het scherm weergegeven (d.w.z. van het midden naar rechts):

Om ervoor te zorgen dat ons ‘hoofdblok’ zich in het midden van het scherm bevindt, moet het midden ervan samenvallen met het midden van de ‘body’-tag. Die. je moet het "hoofd" blok met de helft van zijn grootte naar links verschuiven. De breedte van het "hoofdblok" is 800 pixels, wat betekent dat u de eigenschap "margin-left:-400px" erop moet instellen. Ja, deze eigenschap kan negatieve waarden aannemen, waarna de linkermarge wordt verkleind (d.w.z. naar links verschoven). En dit is precies wat we nodig hebben.

Het stijlblad ziet er nu als volgt uit:

body( breedte:800px; opvulling-links:50%; ) #main( breedte:800px; marge-links:-400px; ) #header( achtergrond:#3e4982; breedte:800px; hoogte:150px; tekst-align:center ; kleur:#FFFFFF; lettergrootte:24px; opvulling bovenaan:40px; ) #menu(achtergrond:#6173cb; zwevend:links; breedte:200px; hoogte:300px; tekstuitlijning:midden; kleur:#FFFFFF; lettergrootte:18px; opvulling-top:10px; ) #content( achtergrond:#ffffff; marge-links:200px; hoogte:300px; tekst-uitlijning:center; ) #footer(achtergrond:#3e4982; helder:beide; breedte:800px;tekst uitlijnen:center;lettergrootte:14px;

En onze pagina in de browser bevindt zich precies in het midden:

We hebben twee opties bekeken voor het centreren van sitepagina's; deze zijn in feite geen dogma's. U kunt experimenteren en uw eigen versie bedenken, kijk gewoon hoe deze in verschillende browsers werkt. Helaas kan wat goed wordt weergegeven in FireFox of Opera volkomen onbegrijpelijk worden weergegeven in IE en omgekeerd. En dit moeten we onthouden.

Veel succes met je creatieve zoektocht!

Het moet voor een bezoeker gemakkelijk zijn om de informatie die hij nodig heeft op de pagina te vinden. Hiervoor worden verschillende HTML-tags gebruikt, evenals om een bepaalde uitdrukking uit te drukken. Dit artikel bespreekt de nuances van het werken met tabellen, in het bijzonder hun uitlijning.

Fundamentele subtiliteiten

Allereerst moet worden opgemerkt dat u met deze grafische vorm van gegevenspresentatie informatie kunt structureren, wat de assimilatie ervan aanzienlijk vergemakkelijkt. Bijna elke inhoud kan in de tabelcellen staan: van tekst tot video. Het is belangrijk om niet alleen rekening te houden met de grootte, maar ook met de locatie.

Hoe de tafel zelf te centreren

Meestal moet u de tabel in het midden van de pagina plaatsen, hoewel deze aanvankelijk tegen de linkerkant van de pagina wordt gedrukt. Om het op het midden uit te lijnen, moet u de marge-eigenschap op automatisch zetten.

...

Hierdoor wordt de tabelinspringing automatisch berekend. Hierna staat de tabel in het midden van de pagina.

Centreer uitlijning in cellen

Net zo vaak moet u gegevens uitlijnen op het midden van de cel. Er zijn drie manieren om dit te doen: horizontaal, verticaal en absoluut. Uit hun naam blijkt duidelijk langs welke as de centrering zal plaatsvinden. In ieder geval wordt de tag gebruikt , verantwoordelijk voor een specifieke cel op een rij. Vervolgens moet u de attributen valign (verticaal) en/of align (horizontaal) de waarde "center" toekennen, afhankelijk van uw taak:

Tekst gecentreerd in cel

Als u deze opmaak standaard wilt maken voor de hele site of pagina (om niet elke tabel te herschrijven), moet u CSS-stijlen gebruiken. Om dit te doen, voegt u de volgende code toe aan de tag :

Met deze methode kunt u ook de uitlijning instellen voor een specifieke cel, een kolom, een rij of de hele tabel als geheel. Zoals u kunt zien, is elk van de methoden heel eenvoudig.

Vandaag, beste lezer, zullen we het probleem van verticale uitlijning in een blok behandelen div.

Hoogstwaarschijnlijk weet u al dat er een prachtige CSS-eigenschap bestaat verticaal uitlijnen. En God zelf beval ons om precies deze eigenschap te gebruiken voor verticale uitlijning (het heeft niet voor niets zo'n vanzelfsprekende naam).

Probleemstelling: U moet de inhoud van een blok met variabele hoogte centreren ten opzichte van de verticaal.

Laten we nu beginnen met het oplossen van het probleem.

En dus hebben we een blok, waarvan de hoogte kan veranderen:

Inhoud blokkeren

Het eerste dat in je opkomt is om de volgende schijnbeweging te maken:

Inhoud blokkeren

Er is alle reden om aan te nemen dat de zinsnede Inhoud blokkeren wordt uitgelijnd met de middenhoogte van de div-container.

Maar dat was niet het geval! Op deze manier zullen we geen verwachte middenuitlijning bereiken. Waarom? Het lijkt erop dat alles correct is aangegeven. Het blijkt dat dit het probleem is: het onroerend goed verticaal uitlijnen kan alleen worden gebruikt om de inhoud van tabelcellen uit te lijnen of om inline-elementen ten opzichte van elkaar uit te lijnen.

Wat betreft de uitlijning binnen een tabelcel, denk ik dat alles duidelijk is. Maar ik zal een ander geval uitleggen met inline-elementen.

Verticale uitlijning van inline-elementen

Stel dat u een regel tekst heeft die is opgedeeld door regeltags in delen:

Jij verwelkomt deel tekst!

Een inlinetag is een container waarvan het uiterlijk er niet voor zorgt dat de inhoud op een nieuwe regel terechtkomt.

De actie van een bloktag zorgt ervoor dat de inhoud van de container naar een nieuwe regel loopt.

is een bloktag. Als we stukjes tekst in blokken omsluiten
, dan zal elk van hen op een nieuwe regel staan. Label gebruiken , wat, in tegenstelling tot
, is kleine letters, containers worden niet naar een nieuwe regel verplaatst, alle containers zal op dezelfde lijn blijven.

Houder handig om te gebruiken bij het specificeren van een deel van de tekst met speciale opmaak (markeren met een kleur, een ander lettertype, enz.)

Voor containers Pas de volgende CSS-eigenschappen toe:

#perviy( verticaal uitlijnen:sub; ) #vtoroy( verticaal uitlijnen:3px; ) #tretiy( verticaal uitlijnen:-3px; )

De resulterende tekstregel ziet er als volgt uit:

Dit is niets anders dan de verticale uitlijning van inline-elementen en de CSS-eigenschap verticaal uitlijnen kan deze taak perfect aan.

We raakten een beetje afgeleid, nu keren we terug naar onze hoofdtaak.

Verticale uitlijning in div-container

Wat er ook gebeurt, voor uitlijning binnen de div-container zullen we de eigenschap gebruiken verticaal uitlijnen. Zoals ik al zei, kan deze eigenschap worden gebruikt in het geval van het uitlijnen van inline-elementen (we hebben dit geval hierboven in detail besproken en het is niet geschikt voor ons voor uitlijning in een div-container); het enige dat overblijft is het feit dat te gebruiken verticaal uitlijnen werkt voor tabelcellen.

Hoe kunnen we dit gebruiken? Wij hebben geen tafel, wij werken met een div container.

Haha, het blijkt heel simpel te zijn.

CSS-eigenschap weergave Hiermee kunt u ons div-blok in een tabelcel veranderen, dit kan eenvoudig en natuurlijk worden gedaan:

Laten we zeggen dat we een klassendiv hebben tekst uitlijnen:

Inhoud blokkeren

Voor dit blok specificeren we de volgende CSS-eigenschap:

Textalign(weergave: tabelcel; )

Deze CSS-instructie zal onze div op wonderbaarlijke wijze in een tabelcel veranderen zonder deze op enige manier visueel te veranderen. En voor een tabelcel kunnen we de eigenschap toepassen verticaal uitlijnen volledig en de gewenste verticale uitlijning zal werken.

Alles kan echter niet zo eenvoudig eindigen. We hebben een prachtige IE-browser. Hij weet niet hoe hij met het pand moet omgaan weergave: tabelcel(Ik stel voor dat u de tabel leest die de functionaliteit van deze CSS-eigenschap in verschillende browsers op de website htmlbook.ru illustreert). Daarom zullen we onze toevlucht moeten nemen tot verschillende trucs.

Er zijn veel manieren om uitlijning in een div-container voor alle browsers te bereiken:

Methode met behulp van een extra hulpdiv-container
Methode met behulp van expressie. Het houdt verband met een lastige berekening van blokhoogten. Dit kun je niet doen zonder kennis van JavaScript.
De eigenschap line-height gebruiken. Deze methode is alleen geschikt voor verticale uitlijning in een blok met bekende hoogte en is daarom in het algemene geval niet toepasbaar.
Gebruik van absolute en relatieve inhoudsverschuiving in het geval van IE-browser. Deze methode lijkt mij het meest begrijpelijk en eenvoudig. Bovendien is het implementeerbaar voor een div-container met variabele hoogte. We zullen er dieper op ingaan.

Zoals u begrijpt, hoeven we alleen het probleem van de verticale uitlijning in IE op te lossen, dat verband houdt met het verkeerd begrijpen van de eigenschap weergave: tabelcel(noch IE6, noch IE7, noch IE8 niet bekend met deze woning). Daarom gebruiken voorwaardelijk commentaar We zullen verschillende CSS-eigenschappen specificeren specifiek voor de IE-familie van browsers.

Voorwaardelijke opmerking

Constructietype:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

wordt een voorwaardelijk commentaar genoemd (let op, het type voorwaardelijk commentaar moet volledig overeenkomen met het gegeven voorbeeld, tot op een spatie na).

De instructies in een dergelijk voorwaardelijk commentaar worden alleen uitgevoerd als de browser die deze code interpreteert tot de IE-familie behoort.

Met behulp van een voorwaardelijke opmerking kunnen we dus een stukje code verbergen voor alle browsers behalve IE.

Probleem oplossing

Vanwege al deze peterselie zullen we onze HTML-code moeten voorzien van twee extra containers. Dit is hoe ons tekstblok eruit zal zien:

Dit is een soort verificatietekst.
Het bestaat uit twee lijnen.

Voor de klasse div-container tekst uitlijnen Er zijn CSS-eigenschappen ingesteld die de inhoud verticaal uitlijnen voor alle normale browsers (behalve IE natuurlijk):

Weergave: tabelcel; verticaal uitlijnen: midden;

En nog twee eigenschappen die de breedte en hoogte van het blok instellen:

Breedte: 500px; hoogte: 500px;

Dit is voldoende om de inhoud van de container in alle browsers gecentreerd ten opzichte van de verticaal uit te lijnen behalve IE.

Nu beginnen we eigenschappen toe te voegen die verband houden met uitlijning voor browsers van de IE-familie(het is voor hen dat we extra blokken hebben gebruikt div En span):

Verwijzend naar het label div binnen een klassenblok tekst uitlijnen. Om dit te doen, moet u eerst de naam van de klasse opgeven en vervolgens, gescheiden door een spatie, de tag waartoe we toegang hebben.

Textalign div( positie: absoluut; bovenaan: 50%; )

Dit ontwerp betekent: voor alle div-tags binnen een blok met een klasse tekst uitlijnen pas de vermelde eigenschappen toe.

Dienovereenkomstig zijn de stijlen gespecificeerd voor het blok tekst uitlijnen zijn aangepast:

Textalign(weergave: tabelcel; verticaal uitlijnen: midden; breedte:500px; hoogte: 500px; positie: relatief; )

Nu wordt het punt linksboven van het tekstblok met 50% naar beneden verplaatst.

Om uit te leggen wat er gebeurt, heb ik een illustratie getekend:

Zoals je op de foto kunt zien, hebben we enige vooruitgang geboekt. Maar dat is niet alles! Het punt linksboven van het gele blok is inderdaad 50% naar beneden verplaatst ten opzichte van het bovenliggende (paarse) blok. Maar we hebben het nodig dat het zich op vijftig procent van de hoogte van het paarse blok bevindt. midden van het gele blok, niet het punt linksboven.

Nu komt de tag in het spel span en zijn relatieve positionering:

Textalign span( positie: relatief; boven: -50%; )

We hebben het gele blok dus met 50% van de hoogte naar boven verschoven ten opzichte van de oorspronkelijke positie. Zoals u begrijpt, is de hoogte van het gele blok gelijk aan de hoogte van de gecentreerde inhoud. En bij de laatste bewerking op de spancontainer werd onze inhoud in het midden van het paarse blok geplaatst. Hoera!

Laten we een beetje vals spelen

Allereerst moeten we peterselie voor alle normale browsers verbergen en openen voor IE. Dit kan uiteraard met behulp van een voorwaardelijke opmerking; het is niet voor niets dat we er kennis mee hebben gemaakt:

Er is een klein probleem. Als de gecentreerde inhoud te hoog is, leidt dit tot onaangename gevolgen: er is een extra hoogte voor de verticale scroll.

Oplossing: moet een eigenschap worden toegevoegd overloop: verborgen blok tekst uitlijnen.

Maak kennis met het pand in detail overloop mogelijk bij.

De laatste CSS-instructies voor het blok tekst uitlijnen heeft de vorm:

Textalign(weergave: tabelcel; verticaal uitlijnen: midden; breedte: 500px; hoogte: 500px; positie: relatief; overloop: verborgen; rand: 1px effen zwart; )

Het spijt me, ik vergat een belangrijk punt te vermelden. Als je het probeert stel de hoogte van het klassenblok in tekst uitlijnen als percentage, dan heb je niets zal werken.

Centrering in blok met variabele hoogte

Heel vaak is het nodig om de hoogte van een klassenblok in te stellen tekst uitlijnen niet in pixels, maar als een percentage van de hoogte van het bovenliggende blok, en lijn de inhoud van de div-container in het midden uit.

Het probleem is dat het onmogelijk is om dit te doen voor een tabelcel (maar het klassenblok tekst uitlijnen wordt dankzij de eigenschap precies een tabelcel weergave: tabelcel).

In dit geval moet u een extern blok gebruiken waarvoor de CSS-eigenschap is opgegeven weergave: tafel en stel al de procentuele waarde van de hoogte ervoor in. Vervolgens werd het blok erin genest, met de CSS-richtlijn weergave: tabelcel, zal met plezier de hoogte van het bovenliggende blok erven.

Om in ons voorbeeld een blok met variabele hoogte te implementeren, zullen we de CSS een beetje bewerken:

Naar de klas tekst uitlijnen wij zullen de waarde van het onroerend goed wijzigen weergave Met tafel-cel op tafel en verwijder de uitlijningsrichtlijn verticaal uitlijnen: midden. Nu kunnen we de hoogtewaarde veilig wijzigen van 500 pixels naar bijvoorbeeld 100%.

Dus de CSS-eigenschappen voor het klassenblok tekst uitlijnen zal er als volgt uitzien:

Textalign(weergave: tabel; breedte:500px; hoogte: 100%; positie: relatief; overloop: verborgen; rand: 1px effen zwart; )

Het enige dat overblijft is het implementeren van contentcentrering. Om dit te doen, is een div-container genest in een klassenblok tekst uitlijnen(dit is hetzelfde gele blok in de afbeelding), je moet de CSS-eigenschap instellen weergave: tabelcel, dan zal het de hoogte van 100% overnemen van het bovenliggende blok tekst uitlijnen(paars blok). En niets houdt ons tegen om de inhoud van de geneste div-container in het midden uit te lijnen met de eigenschap verticaal uitlijnen: midden.

We krijgen nog een extra lijst met CSS-eigenschappen voor het div-blok dat in de container is genest tekst uitlijnen.

Textalign div( weergave: tabelcel; verticaal uitlijnen: midden; )

Dat is de hele truc. Indien gewenst kunt u een variabele hoogte instellen met de inhoud gecentreerd.

Voor meer informatie over de verticale uitlijning van een blok met variabele hoogte, zie .

In CSS zijn sommige ogenschijnlijk eenvoudige dingen niet zo eenvoudig te doen. Eén van deze dingen is uitlijning, d.w.z. wanneer het ene element op een bepaalde manier ten opzichte van het andere moet worden gepositioneerd.

Dit artikel presenteert enkele kant-en-klare oplossingen die het werk van het horizontaal en/of verticaal centreren van elementen zullen helpen vereenvoudigen.

Let op: Onder elke oplossing staat een lijst met browsers die de versies aangeeft waarin de opgegeven CSS-code werkt.

CSS - Blok centreren

1. Eén blok uitlijnen met het midden van een ander blok. In dit geval hebben de eerste en tweede blokken dynamische afmetingen.

...

Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; top: 50%; -webkit-transform: vertalen(-50%, -50%); -moz-transform: vertalen(-50% , -50%); -ms-transform: vertalen(-50%, -50%); -o-transform: vertalen(-50%, -50%); ;)

Chroom 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Eén blok uitlijnen met het midden van een ander blok. In dit geval heeft het tweede blok vaste afmetingen.

Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; boven: 50%; /* breedte en hoogte van 2 blokken */ breedte: 500px; hoogte: 250px; /* Waarden worden bepaald afhankelijk op de grootte */ /* margin-left = - breedte / 2 */ margin-left: -250px; /* margin-top = - hoogte / 2 */ margin-top: -125px )