Login / Join
(Css Only) Centering a div within the Viewport
submitted on 09/08/2013 by
Codicode
+ infos
Config
Embed
Share
(Css Only) Centering a div within the Viewport
by
Codicode
This is how to center a div (both vertial and horizental) within the Viewport/web page.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="397" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div class="pup"> This div will be centred both horizentally and vertically within the Viewport. </div>
CSS
body { background-color:black; } .pup { width: 50%; height: 50%; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; border:5px solid #456; color:white; background-color:red; padding : 50px; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact