this content was originally posted here.

flex align center vertical horizontal

lets say you have a box within another box, like so:

now in the olden days of web development, to get this another-box to align in the center i would have just added margin:0 auto; which fixes the center align but what about the top, you can add a % top margin and then minus it by half the div height. Anyway now this is much simpler with flex

we can just add the following to the wrapping box

display: flex;
align-items: center;
justify-content: center;
.flexed {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 1s;		
}
.wide-box {
	width:800px;
	transition: all 0.5s;
}
.rounded-box {
	border-radius: 30px;
}

and now it should be centered!

/yay

which is good, if we are resizing the elements it should still stay in the center.

setInterval(function(){ $("#flexanimated").toggleClass("wide-box"); }, 3000);

Mmm.. animated flex box sand witch

Ah yeah i should probably add the code for that as well, just a toggle class on setInterval

Demo

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:uAJDW
$p4:flex-align-center-vertical-horizontal
$p5:
$p6:
$p:/view/code/uAJDW/flex-align-center-vertical-horizontal/
Using Template: view-code.html