【解決方法】div 内のテキストを中央揃えにする

免責事項: 私は html についてほとんど何も知りません

テキストを中央、水平、垂直に配置しようとしています。問題は、私のコードが最初の div に対してのみそれを行うことであり、さらに div を次々と (垂直方向に) 繰り返します。下から試用版を修正できますか?

私が試したこと：

HTML

<pre><!DOCTYPE html>

<html>
<head>
	<title>Horizontal and Vertical alignment</title>
	<style>
	
	.container {
		height: 200px;
		width: 400px;
		border: 2px dashed #4b2869;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		position: relative;
	}
	.container1 {
		height: 200px;
		width: 400px;
		border: 2px dashed #4b2869;
		display: table-cell;
		text-align: center;
		vertical-align: bottom;
		position: absolute;
	}
	</style>
</head>

<body style="background-color:#646464;">
	<div class="container">container</div>
	<div class="container1">container1</div>
</body>

</html>

解決策 1

もう一度試してみましたが、次の行を変更すると:

HTML

<div class="container1">container1</div>

に

HTML

<div class="container">container1</div>

つまり、同じものを使用します class 両方のための divs、それはうまくいくようです。

代わりに変更

HTML

position: absolute;

に

HTML

position: relative;

の中に container1 クラス。