T-Rex: Box im Viewpoint zentrieren

Frohe Weihnachten,

hab da eine Box, vielmehr ein Div. Die Größe des Divs ist nicht bekannt. Eine Breite oder Höhe setzen geht somit nicht.
Jetzt möchte ich dieses Div genau im Zentrum des Viewpunktes haben. Naja vielmehr soll der Inhalt immer zentriert sein. Wichtig ist, dass dies bei unterschiedlichen Viewpoints funktioniert. Sprich wenn der Viewpoint 1200px ist soll das Ganze zentriert sein, bei 320px aber auch. Da die Seite nur aus dieser einen Box besteht bin ich für jegliche "Schweinereien" offen.
Bislang habe ich nur Lösungen gefunden wo der Box eine Höhe gegeben wird :(.

Gruß
T-Rex the green nose dino

  1. Mahlzeit,

    Bislang habe ich nur Lösungen gefunden wo der Box eine Höhe gegeben wird :(.

    Hatte das gleiche Problem. Meine Lösung (weil es anscheinend keine andere gibt), ich ziehe mit mit JS nach, indem ich den Viewport auslese und line-height setze.
    Wenn du was anderes als text hast, kannst du evtl. auch margin benutzen und die Höhe nachträglich auf einen fixen wert setzen. Aber was anderes als JS ist wohl nicht drin. Wenn doch, immer her damit, ich will auch :D

    --
    42
  2. hi,
    ist doch alles nicht so schwer, guck mal auf meine 'schöne' Seite. Anstelle der festen Breite könnte man eventuell min/max-width verwenden.

    Gruß Adolf

  3. Om nah hoo pez nyeetz, T-Rex!

    <!doctype html>  
    <html>  
        <head>  
            <meta charset="utf-8">  
            <title></title>  
    		<style>  
    			html, body {  
    				margin: 0;  
    				padding: 0;  
    				height: 100%;  
    			}  
    			body {  
    				display: table;  
    				width: 100%;  
    				text-align: center;  
    			}  
    			div {  
    				height: 100%;  
    				width: 100%;  
    				display: table-cell;  
    				vertical-align: middle;  
    				margin: 0 auto;  
    			}  
    		</style>  
            </head>  
    	<body>  
    		<div>  
    			Unbekannte Höhe<br><br>  
    			noch eine Zeile  
    		</div>  
    	</body>  
    </html>
    

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kant und Kantate.

    1. Om nah hoo pez nyeetz, Matthias Apsel!

      div {

      display: table-cell;
        margin: 0 auto;
      }

        
      Das margin ist natürlich überflüssig.  
        
      Matthias
      
      -- 
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [XING und Xingyiquan](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=X#xing).  
      ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
      
      
    2. Hmpf... ich war echt nah dran.
      Das table-cell hatte ich auch. Jedoch hatte ich noch ein position absolute dabei. Das verhindert das table-cell anscheinend. Außerdem bin ich natürlich nicht auf die Idee gekommen dem Body ein table zu geben.

      Gruß
      Danke Matthias
      T-Rex

  4. Hallo T-Rex,

    hab da eine Box, vielmehr ein Div. Die Größe des Divs ist nicht bekannt. Eine Breite oder Höhe setzen geht somit nicht.
    Jetzt möchte ich dieses Div genau im Zentrum des Viewpunktes haben.

    ich habe da auch noch was: http://www.j-berkemeier.de/GPXViewer/ShowGPX.html. Die Lösung basiert auch auf display table/table-cell. Bei der Beschreibung musste ich dem Inhalt eine Breite geben, da die "p" sonst die ganze Fensterbreite genutzt hätten, bei der Parametereingabe richtet sich die Breite der zentrierten Box nach dem Inhalt.

    Gruß, Jürgen