リストの先頭を揃えたまま左右中央寄せ

レスポンシブで画面が狭くなると折り返しは左揃えになる

リストの場合(3層)

<section class="sample">
	<ul>
		<li>あいうえおかきくけこ</li>
		<li>さしすせそ</li>
		<li>たちつてとなにぬねのはひふへほ</li>
	</ul>
</section>
.sample {
	text-align: center;
	display: block;
	ul {
		display: inline-block;
		li {
			text-align: left;
		}
	}
}

Pタグの場合(2層)

<section>
	<p>あいうえお</p>
</section>
section {
	text-align: center;
	display: block;
	p {
		display: inline-block;
		text-align: left;
	}
}