[HP作成] 枠内の文章の長さについて

Question

エンジニア初心者で恐縮ですが、今ポートフォリオ作成に向けて、ブログサイトのホームページを作成しております。
その中で、背景色を塗りつぶした枠内に、自分のプロフィールを記入しようと思っております。
枠の位置はホームページの左下(レイアウトの関係の為)に作成し、position要素を使用して、文章の位置を固定しましたが、枠の大きさに対して文章一行の長さが短く、バランスの悪い見栄えとなっています。
質問させていただきたいのが、この枠のサイズや位置の条件を変えず、文章の長さを調整できる方法を教えて頂きたいです。
わかりにくい文章で申し訳ありませんが、何卒宜しくお願い致します。

  <article id="content">
    <div class="profile">
      <h2>プロフィール</h2>
      <p>ここに文章。
      </p>
    </div>

#content{
  display: flex;
}

.profile {
  background-color: #eee;
  width: 50%;
  height: 500px;
  margin-left: 170px;
  position: relative;
}

.profile h2{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -30%);
  font-size: 50px;
  color: #333;
}

.profile p{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -70%);
  font-size: 30px;
  color: #333;
}

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
ちゃんとマークダウン使えば見出し扱になりません。
https://teratail.com/help#about-markdown

[Lhankor_Mhy]

こういうことに絶対配置を使うのは筋が悪いと思うのですが、この絶対配置は解決方法の条件ですか？

[daakishi]

コメントありがとうございます。
いえ！同じレイアウトにさえできれば、絶対配置でなくても問題ございません。
もっと簡単な書き方があれば、合わせて教えて頂けると大変助かります。

Answer 1

とりえあず、幅を100%にして文字をセンタリングをするのではダメでしょうか？

.profile h2 {
	position: absolute;
	top: 20%;
	/* left: 50%; */
	/* transform: translate(-50%, -30%); */
	transform: translate(0, -30%);
	font-size: 50px;
	color: #333;
	width: 100%;
	text-align: center;
}

Comments

[daakishi]

ありがとうございます。前の形式と比べると、綺麗なりましたのでこちらで進めさせていただきます。ご協力ありがとうございました！