CSSを使って中央寄せなレイアウトをおこないたい時のために方法をまとめてみました！
それぞれ複雑なことはそれ程ないので、ぜひ試してみてください＾＾

デモページ

ベースとなるHTMLはこちらです！

<div>
	<p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、
	そこはかとなく書きつくれば、あやしうこそものぐるほしけれ...</p>
</div>

テキストの左右中央揃え

text-align: center;

基礎中の基礎！これを覚えることは必須です

デモページ

div{
	text-align:center;	/*テキストをセンターにします*/
}

テキストの上下中央揃え

line-height:xxx;

親要素のBOXと同じ高さのline-heightを指定します！
改行のない1行テキストのみに有効

デモページ

div{
	line-height:calc( 300px - 60px );	/*( BOXの高さ - padding幅 )*/
}

display: table-cell;

vertical-align: middle;を使った上下中央揃えです
親要素をtableに変更しています

デモページ

div{
	width:100%;
	display: table;	/*BOXをテーブルに変更*/
}
div p{
	display: table-cell;
	vertical-align: middle;	/*上下の中央揃え指定*/
}

display: inline-block;

vertical-align: middle;を使った上下中央揃えです
親要素をinline-blockに変更しています

デモページ

div{
	line-height:300px;	/*BOXの高さ分を指定*/
}
div p{
	display: inline-block;
	vertical-align: middle;	/*上下の中央揃え指定*/
	line-height:normal;	/*BOX内のテキスト行間を元に戻します*/
}

BOXの左右中央揃え

margin: 0 auto;

BOXの左右中央寄せでは王道のやり方です！

デモページ

div p{
	width:70%;	/*BOX幅が決まっていないと使えません*/
	margin:0 auto;
}

display: inline-block;

inline-blockを使っているので、次のBOXの回り込みに注意してください！

デモページ

div{
	text-align:center;	/*まずは子の全体をテキスト中央にします*/
}
div p{
	display: inline-block;	/*inline-blockにすることによって、text-alignの指定が効くようになります*/
	text-align:left;	/*BOX内のテキストを左寄せに戻します*/
}

display: flex;

とってもカンタンに中央寄せできる方法！今ではよく使われている方法ではないでしょうか

デモページ

div{
	display: flex;
	justify-content: center;	/*flex専用*/
}

position: absolute;

margin: auto;+position: absolute;の組み合わせです！
absoluteを使っての中央寄せはよく悩む方法ではないでしょうか

デモページ

div{
	position: relative;	/*親要素指定*/
}
div p{
	width:70%;	/*横幅は必須*/
	margin:0 auto;	/*BOXの中央揃え*/
	position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:0;
	right:0;
}

BOXの上下中央揃え

display: flex;

とってもカンタンなflexを使っての中央寄せ！ぜひ覚えるべきです

デモページ

div{
	display: flex;
	align-items: center;	/*flex専用*/
}

position: absolute;

margin: auto;+position: absolute;の組み合わせです！
上下の中央寄せもできちゃいます！

デモページ

div{
	position: relative;	/*親要素指定*/
}
div p{
	margin:auto 0;	/*上下をautoにします*/
	height:100px;	/*高さは必須*/
	position: absolute;	/*top,bottomが0の時左右の中央揃えになります*/
	top:0;
	bottom:0;
}

transform: translateY(-50%);

margin: auto;を使わない！position: absolute;を使っての中央寄せです！

デモページ

div{
	position: relative;	/*親要素指定*/
}
div p{
	position: absolute;
	top:50%;
	transform: translateY(-50%) ;
}

今回ご紹介した方法が全てではないので、他にもさまざまなやり方がありますよ！
どんな方法がいいのかは、試してみてください＾＾
自分の組みやすい方法が見つかるといいですね！