CSS 子textが小さい親divに対して中央寄せ

<div id="box" style="background-color: black; opacity: 1.0; width: 10px;">
    
    <span id="text" style="background-color: black; opacity: 0.5; white-space: nowrap; color: white;">
        
        このテキストはJavaScriptで書き換えます</span>
</div>
コード

改行しないテキストをどんな長さでも中央寄せ出来るような方法が知りたいです。
0. 出来るだけ簡単で応用しやすい方法がいいです。
0. cssとhtmlだけで出来る方法がいいです。
0. 思いつかければ,何か別のアイディアをください。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1	.per{
2		display:block;
3		position:relative;
4		text-align: center;
5		min-height:200px;
6	}
7	.box{
8	    background-color: #000;
9	    width: 100px;
10	    display: inline-block;
11	    position: relative;
12	    min-height:20px;
13	}
14	.text{
15		color: #ff0000;
16	    white-space: nowrap;
17	    position: absolute;
18	    left: 50%;
19	    display: block;
20	    transform: translate(-50%);
21	}

html
1	<div class="per">
2		<div class="box">
3			<span class="text">testesttestesttestesttestesttestesttestesttestesttestesttestest</span>
4		</div>
5	</div>
6	<div class="per">
7		<div class="box">
8			<span class="text">ああああああああああああ</span>
9		</div>
10	</div>
11	<div class="per">
12		<div class="box">
13			<span class="text">いいいいいいいいい</span>
14		</div>
15	</div>
16	<div class="per">
17		<div class="box">
18			<span class="text">うううううう</span>
19		</div>
20	</div>