CSS - CENTER

============================
======== CSS - CENTER  v.1 - POSTé
============================

=========================================
=========== CENTER
==http://www.noobcube.com/tutorials/html-css/horizontal-and-vertical-centering-using-css-a-beginners-guide-/

============================
===========CENTER === Vertical text centering
==http://stackoverflow.com/questions/2439177/use-margin-auto-and-center-to-center-float-left-div
==http://stackoverflow.com/questions/6823979/css-vertical-text-centering
============================
===========CENTER - HORIZONTALLY Centering ABSOLUTE Positioned Elements :
ELEMENT WIDTH + ABSOLUTE >> LEFT (50% of element width in %)  and NEGATIVE MARGIN-LEFT (1/2 ELEMENT WIDTH in PX)
== http://www.noobcube.com/tutorials/html-css/horizontal-and-vertical-centering-using-css-a-beginners-guide-/
Centering an element that has position: absolute declared is quite simple if there's a width declared.
Let's create a simple div with a fixed width, absolute positioning, and some basic styles for appearance.
HTML
<div>I'm a horizontally centered div that's absolutely positioned in the browser.</div>
CSS :
div{
	width: 600px;
	position: absolute;
	left: 50%;
	margin-left: -300px;
	background: #CCC;
}

What we've done is given our div element a width of 600px and a position: absolute declaration.
 We gave it a background color just to show the 600px element.
What's important here is the left and margin-left values:
 - We've set our left value to 50% which moved our element over 50% from the left.
 - We then take half of the element size and put a negative margin-left value equal to that.
 In our case, half of 600px is 300px.

============================
===========CENTER - HORIZONTALLY Centering Block-Level Elements with an UNKNOWN Width :
DISPLAY:TABLE >> RIGHT / LEFT MARGIN = AUTO
== http://www.noobcube.com/tutorials/html-css/horizontal-and-vertical-centering-using-css-a-beginners-guide-/
We declare our display property value as table on our p elements,
they will be treated as a block-level table element.
This means two things:
  -  TABLE element will only take up as much width as it needs. So there's no need to declare a width for it.
    It's still treated as a block-level element, therefore it will still render the margin property.
p {
	background: #ccc;
	padding: 5px;
	border: 1px solid #000;
	display: table;
	margin: 10px auto;
}
Added:
 - DISPLAY:TABLE declaration to get our p elements to render as table elements.
 - 10px bottom and top margin,
 - RIGHT / LEFT MARGIN = AUTO


============================
===========CENTER - VERTICAL ALIGN  == table / table-cell
== http://www.webtoolkit.info/css-vertical-align.html
DEMO: CSS vertical align
.v-outer {
display: table;
#position: relative;
overflow: hidden;
height: 100px;
background: black;
color: white;
width: 100%;
}
.v-middle {
display: table-cell;
#position: absolute;
#top: 50%;
vertical-align: middle;
}
.v-inner {
position: relative;
#top: -50%;
}
htlm :
 	<div class="border v-outer">
	<div class="v-middle">
	<div class="v-inner">

============================
===========CENTER - VERTICAL Centering Text with Line-Height : (line-height text = height containing block)
==http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/
Vertically center text within a containing block who’s height is fixed,
simply set the line-height of the text to be the same as the height of the containing block.
The HTML:

<div id="container">some text here</div>
The CSS:
div#container {height: 35px; line-height: 35px}

============================
===========CENTER - VERTICAL Block Level Elements
==http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/
Positioning can be used to vertically center block level elements.
The HTML:
<div id="content">your content here</div>
The CSS:
div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}
The top left corner of the div will be positioned 50% from the top.
Since we want the center of the div to be positioned 50% from the top
you need to set a negative top margin equal to half the height of the div.

This same trick works for horizontal centering as well.
Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400px;  margin-top: -250px}
The above CSS will center the element both vertically and horizontally


============================
===========CENTER - VERTICAL With CSS : Using a floater and clearing the content
== http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Because the content will clear:both;,
you can also put other elements above it, and when the windows collapses,
the centered content will not cover them up. See the demo.
 <div id="top">
 <h1>Title</h1>
 </div>
 <div id="floater"></div>
 <div id="content"> Content Here </div>
 #floater {float:left; height:50%; margin-bottom:-120px;}
 #top {float:right; width:100%; text-align:center;}</strong>
 #content {clear:both; height:240px; position:relative;}


============================
===========CENTER - WITH Fixed-Sized Element (parent container : relative property for this to work.)
Center a fixed-width/fixed-height div at the center of its container.
 This could be adapted to centering text, images, etc. within their containers.
 Essentially, we do a bit of arithmetic to get the fixed-sized element centered using absolute positioning and margins.
 Note that the parent container must have a position: relative property for this to work.

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 300px;
  margin-top: -150px; /* 1/2 of your element height*/
  margin-left: -200px; /* 1/2 of your element width */
}

============================
===========CENTER - Vertically Align Text : line-height to the same height as the containing div
== http://sixrevisions.com/css/10-random-css-tricks-you-might-want-to-know-about/
We can use a variety of methods for horizontally aligning text :
text-align: center or margin: 0 auto) but it’s slightly trickier to vertically align text.
However, for single-line text, we can use the line-height property.
 By setting the line-height property of the text element to the same height of its container, it will become vertically centered.
Here is a p element:
horizontally-centered inside a 100x100px div using text-align: center:

==Vertically Align Text :
As you can see, text-align doesn’t center it vertically.
 To fix that, we can set line-height to the same height as the containing div (100px).

div { width:100px; height:100px; }
div p { line-height:100px; }

Note that this assumes the p element has no margin or padding.
 If you have margin or padding at the top or bottom of the p element,
 you need to compensate for them accordingly or just simply set padding and margin to 0 to make life easier.

Also, this trick becomes troublesome when there is more than one line of text (i.e. when the text wraps)
 because there will be a space between the text lines that is equivalent to the line-height value.

============================
===========CENTER - Vertically Align Text : table-cell and vertical-align:middle
We can make text center of the box by using this method display:table-cell and vertical-align:middle

.class {
width:100px;
height:100px;
background-color:#999999;
color:#000000;
border:1px solid red;
text-align:center; /*to make text horizontally center*/
display:table-cell; /*this is the trick*/
vertical-align:middle; /*to make text vertically center*/
}

============================
===========CENTER - WITH Vertical-align: (Tableau + inline-block)
Appliquée à un élément en display: inline-block
(normalement Réservée aux éléments de contenu ou aux cellules de tableaux)
va aligner cet élément au sein de son parent, comme s’il s’agissait d’un texte,
 via un large assortiment de possibilités :

===Valeurs possible pour la propriété vertical-align :

- baseline
 Aligne la base de l’élément avec celle de son parent (valeur par défaut).
- bottom
 Aligne le bas de l’élément avec le bas du parent.
- text-bottom
 Aligne le bas de l’élément avec le bas de la police de l’élément parent.
- top
 Aligne le haut de l’élément avec le haut du parent.
- text-top
 Aligne le haut de l’élément avec le haut de la police de l’élément parent.
- sub
 Aligne la base de l’élément avec la ligne de base indice de son parent,
 tel l’élément HTML <sub>.
- super
 Aligne la base de l’élément avec la ligne de base exposant de son parent,
 tel l’élément HTML <sup>.
- middle
 Aligne le milieu de l’élément avec le milieu de son parent.
- <longueur>
 Aligne la base de l’élément à la longueur donnée au-dessus de la ligne de base de son parent.
- <pourcentage>
 Idem à la valeur <longueur>, où le pourcentage est
 calculé par rapport à la propriété line-height.

========================================
======== FLOAT CENTER : Faking ‘float: center’ with Pseudo Elements ( :before )
==http://css-tricks.com/float-center/
This is a little bit like float, as the text wraps around the image,
but the text wraps around both directions, so it would be a bit like float: center; or float: both; which don't exist.
 Using floated pseudo element placeholders.
 We'll put one in each column of text, one floated left, one floated right.
 The pseudo element should be the height of the image, and half of the width
 (or so... remember you'll want some padding and there is the gutter to factor in).

#l:before,
#r:before {
  content: "";
  width: 125px;
  height: 250px;
}
#l:before {
  float: right;
}
#r:before {
  float: left;
}

Now there is a hole in the text ready to place our image there.
We could do that by absolute positioning it there, as in the demo.
Or you could just leave it in an element above, centered,
and use negative top margin on the columns to pull the text up around.