CSS JS Center box

Somtimes you need that a box centers in the middle of the screen. This can be useful for landings, login or register pages.

Center box without loading

It's not necessary to define the width and the height but you will see the change of position in live.

I'm always in the middle of everything

My position is absolute and JS helps me to be always in the middle of the page, no matter what device it is.

	                <div class="box-primary" data-fc-modules="center-box">
	<h1>I'm always in the middle of everything</h1>
	<p>My position is absolute and JS helps me to be always in the middle of the page, no matter what device it is.</p>
</div>

                

Center box with loading

It's mandatory to define the width and the height but the load process is more beauty.

I'm always in the middle of everything

My position is absolute and JS helps me to be always in the middle of the page, no matter what device it is.

	                <div class="loading">
	<div class="box-primary" data-fc-modules="center-box" data-fc-width="400" data-fc-height="200">
		<h1>I'm always in the middle of everything</h1>
		<p>My position is absolute and JS helps me to be always in the middle of the page, no matter what device it is.</p>
	</div>
</div>


                

Attributes

data-fc-height

Height of the center box

DEFAULT: auto

data-fc-width

Width of the center box

DEFAULT: auto

data-fc-position

Defines if the position css attribute is absolute or fixed. When the position is absolute is relative to his parent but if it's fixed will be relative to the window.

DEFAULT: absolute