Login / Join
The ultimate pure CSS div center solution
submitted on 26/07/2020 by
Codicode
+ infos
Config
Embed
Share
The ultimate pure CSS div center solution
by
Codicode
the ultimate css centring solution, horizentally and veretically center element inside its html parent element. using only CSS, using css grids positionning.
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="131" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div class="parent"> <div class="box" contenteditable> Edit me please :( <br/>Resize me pleeeease :((( </div> </div>
CSS
.parent { display: grid; place-items: center; height:100%; background-color: white; } .box{ padding: 20px; background-color: pink; font:bold 16px arial; resize: both; overflow: auto; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact