Centrování obsahu divu na střed

Jednoducho... materský div má nejakú výšku a line-height pevne určené, tiež vertical-align:middle
A vnútornému divu margin:0 auto;

smiesek:
Baví mě termín „centrování na střed“ - ono se dá vycentrovat někam jinam? ;-)

Uvedená stránka vypadá spíš jako tabulka. Proč to neuděláte jednoduše tabulkou?

smiesek:
Že je na stránce <div> přece neznamená, že nemůžete udělat tabulku tabulkou :-)

Takhle by to mělo jít: Centrování na webových stránkách » Centrování elementu s neznámou výškou a šířkou

Záleží, jestli je cílem výsledek jako na klient.plavacek.net/centrovani.html nebo spíš Obsah s neznámou výškou i šířkou (tj. vycentrovat celý obsah).

Reaguji na smieska:
„mám několik odkazů, ale ani podle jednoho mi to prostě nejde“
Jedeš v quirku, tudíž pro tebe platí trochu jiná pravidla.

„z hlediska ohraničení apod. je nutné to zachovat pomocí div, table to nepůjde“
Nevěřím.

smiesek:
„je nutné to zachovat pomocí div, table to nepůjde“
Nevěřím: Živá ukázka (náhled)

smiesek:
„Pokud nastavím 50%“
Procenta se počítají z velikosti nadřazeného elementu, 50% neznamená poloviční velikost obrázku.

smiesek:
Použij konkrétní hodnotu, třeba v pixelech, jako omezení nejvyšší šířky a nebo výšky obrázku. V případě použití obou omezujících velikostí se použije ta, kterou obrázek překročí a druhá se dopočítá proporcionálně. Pro zaměření obrázku doporučuji spíše než další třídu vhodný selektor potomka, třeba z nadřazené tabulky.


Další možností je použití skriptu, který velikost obrázku zjistí a přepočítá mu nové rozměry přesně na polovinu.

smiesek:
„a ono to nějak funguje“
Protože se „height: 50%;“ nemá z čeho vypočítat, neaplikuje se a zůstane mu výchozí hodnota auto. Prostě jako by tam nebyl. Kdyby se měl z čeho vypočítat, tedy ze zadané výšky nadřazeného bloku, tak by se ti obrázek neproporcionálně deformoval a už by to nebylo tak hezké.

Takže tvé řešení tedy dodržuje jen zadanou šířku obrázku, kterou stanoví na přesnou polovinu dostupného místa. Malé obrázky zvětšuje. Vysoké a úzké klidně také zvětší.

Mnou navržené řešení si pro obrázek stanoví největší velikost/velikosti, do které se musí vejít, buď na výšku, na šířku, případně v obou směrech. Malé obrázky to nezvětšuje. Velké to zmenší tak, aby se vlezly do požadovaného prostoru bez toho, aby se deformovaly.

smiesek:
„proč to je špatně“
Špatně to není. Jen pro některé obrázky nevhodné, neuniverzální.

Zadávat height v procentech v elementu bez výšky je stejné, jako ho nezadávat. Zbytečné.

Měl jsem za to, že chceš redukovat velikost především u velkých obrázků.

„Jak to pozná, že jednou se má zmenšit pro obrázek na výšku a podruhé zase na šířku?“
Nepozná. Jazyk HTML nemá žádný nástroj k tomu, aby zjistil originální velikost obrázku a stanovil z ní polovinu. Proto jsem navrhl rezervovat místo pro obrázky do dané velikosti (šířka klidně i tvých 50 % z dostupné šířky, výška musí být konkrétní hodnota). Při zadání obou hodnot max-width: 120px; max-height: 120px; bude zobrazený obrázek tak velký, že jeho delší strana bude mít nejvýše 120 px a kratší se dopočítá automaticky. Pokud bude mít obrázek oba rozměry menší, nezvětší se.

Pro si to nevyzkoušíš?
Tak jsem to vyzkoušel za tebe a připravil ti případovou studii tří obrázků. Posuď vhodnost stávajícího řešení a mé úpravy:
ukázka s kódem (náhled)

smiesek:
„je tedy ... vždy zpravidla žádoucí jako "vždy" zadávat hodnotu pro výšku“
Vše záleží na konkrétní situaci. Zadání výšky nemá smysl, pokud by ti libovolná nevadila nebo bys dopředu mohla garantovat, že obrázky nebudou příliš vysoké.

„Že pokud by se nezadala výška, tak je zcela zbytečná jakákoliv snaha na zmenšení, protože to nikdy nebude optimální?“
Jak to? Přece stanovení (nejvyšší) výšky omezuje jen příliš vysoké obrázky. U všech ostatních (malé, velké, příliš široké) se nastavení omezení výšky vůbec neuplatní. Ta maximální výška je tam zadaná vlastně hlavně kvůli blbuvzdornosti, aby tam mohl být vložen úplně libovolný obrázek bez toho, aby to nějak narušilo layout.

„Teď zase totiž hledám ještě vědu v tom, kdy to zadávat jako: max-width: 120px nebo 50%;“
Použij, co se ti zdá lepší. Uvnitř bloku s pevnou šířkou je to jedno, v případě natahovacího layoutu bych použil procenta.
A na výšku bych klidně použil třeba jednotky odvozené od velikosti písma, aby se obrázek mohl třeba zvětšovat s ním: max-height: 5em;.

smiesek:
„by procenta byla pro hodnotu height ano?“
Ne. Pro výšku jakákoliv jiná jednotka, jen ne procenta. Vypočítávají se z výšky nadřazeného bloku a ten ve tvém případě výšku nastavenou nemá (ani se obvykle pro obsahové části webu nenastavuje).

„pokud obrázek bude menší než max-height, tak se neuplatní“
Ano.

„a upraví se pouze šířka ano“
Pokud bude širší, tak ano.

Upraví se jen ten směr, který by přesáhl.

Já mám pocit, že jsem ti vysvětlil už třikrát, jaké má úskalí zadání max-height nebo height v procentech. Stačilo. Teď je řada na tobě. Zkoušej si to sama, vlastní poznatky dají víc zkušeností, než desítky cizích rad.