img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}
<img class="displayed" src="..." alt="...">

p.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
<p class="blocktext">This rather...</p>

div.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle
}
<divclass="container">
  <P>This small paragraph...</p>
</div>

div.container {
   height: 10em;
   position: relative }              /* 1 */
div.container p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */
   
<div class=container3>
  <p>This paragraph…
</div>

The essential rules are:
1. Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
2. Make the element itself absolutely positioned.
3. Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
4. Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)

section {
	background: black;
	color: white;
	border-radius: 1em;
	padding: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%) 
}

  <section>
    <h1>Nicely centered</h1>
    <p>This text block is vertically centered.
    <p>Horizontally, too, if the window is wide enough.
  </section>

p{
	font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
	/*caption, icon, menu, message-box, small-caption, status-bar, initial, inherit have no obvious effect*/

	font: 15px arial, sans-serif;
	font: italic 20px Serif;
    font: italic bold 12px/30px Georgia, serif;
	
}

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}
/*Within the selection selector, color and background are the only properties that work. */

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

p:first-of-type::first-letter {
	font-size:300%; color: red;
}

img {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

.shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

.shadow {
-moz-box-shadow:    3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow:         3px 3px 5px 6px #ccc;
}

//text-shadow
.blur {
color: transparent;text-shadow: 0 0 5px #333;
}

.multiple-shadow{
text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;
}

.shadow{display:block;padding:10px 10px;margin:5px 15px;
background-color: #fff;
    box-shadow: 0 1px 3px rgba(34, 25, 25, .4);
    -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, .4);
    -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, .4);
    filter: progid:DXImageTransform.Microsoft.Shadow(color = #adacac, direction = 135, strength = 2);
	transition: box-shadow 0.3s ease-in-out;
-moz-transition: -moz-box-shadow 0.3s ease-in-out;
-webkit-transition: -webkit-box-shadow 0.3s ease-in-out;padding:0 10px;}
	.shadow:hover {
    box-shadow: 0 1px 5px rgba(34, 25, 25, .8);
    -moz-box-shadow: 0 1px 5px rgba(34, 25, 25, .8);
    -webkit-box-shadow: 0 1px 5px rgba(34, 25, 25, .8);
    filter: progid:DXImageTransform.Microsoft.Shadow(color = #979797, direction = 135, strength = 3);
}

transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */

.navbar{margin: 0 auto;width: 100%;text-align: center;height:70px;position:fixed;top:0;}
.navbar ul{list-style: none;}
.navbar li{display: inline-block;}//(!important, to center)
.navbar a{height:100%;}

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

.corners { 
    background: #f6f6f6;
    height: 70px;
    margin: 50px auto;
    padding:20px 5px 5px 15px;
    max-width: 600px;
    position: relative;
    width: 80%;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
/* Corner Effect */
.corners:after,
.corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    -webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
            box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
}
.corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}