CSSで幅を固定せずにブロックの中央寄せや左右寄せする方法の解説です。

通常display:blockの要素を中央寄せなどする場合、幅を固定して左右マージンをautoにすることで実現します。

/* 普通の中央寄せ */
.block {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

/* 普通の左寄せ */
.block {
	width: 300px;
	margin-right: auto;
}

/* 普通の右寄せ */
.block {
	width: 300px;
	margin-left: auto;
}

日本語や英語などのサイトではマージンを指定しなくても左に寄りますが、アラビア語のように書字方向が右から左の場合はマージンを指定しない場合は右に寄ります。

この方法では一々幅を指定してあげる必要があります。内包要素によって可変の幅を持ちつつ、中央寄せしたい場合には使えません。

display:inline-blockの要素なら可変幅にでき、親要素にtext-align:centerを指定すれば中央寄せすることもできますが、改行されないため、複数の要素を中央寄せして縦に並べようとしたのに、幅によっては横に並んでしまう可能性があります。

そこで、可変幅にしつつ、改行が入るようにするためにdisplay:tableを使います。

/* 可変幅中央寄せ */
.block {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/* 可変幅左寄せ */
.block {
	display: table;
	margin-right: auto;
}

/* 可変幅右寄せ */
.block {
	display: table;
	margin-left: auto;
}

table要素は内包する要素で幅が決まります。display:tableを指定しつつ、マージンを指定することで可変幅かつ左右・中央寄せを実現することができるのです。

この方法を使えば、例えばCSSでデザインしたボタンを、文字数を気にすることなく中央寄せにしたりすることができます。親要素になんの指定もいらない点がdisplay:inline-blockによる中央寄せより優れていると思います。