JSFiddle - React, Tailwind, and code Playground

HTML

<h1>インライン要素を絶対中央配置する</h1>

<p>スニペットは以下。</p>

<pre title="HTML"><code data-language="html">&lt;div class="wrap"&gt;
  &lt;span class="target2"&gt;インライン要素&lt;/span&gt;
&lt;/div&gt;</code></pre>

<pre title="CSS"><code data-language="css">.wrap2 {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.target2 {
  margin: -25%;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
}</code></pre>

<h2 id="sam6">おまけ）サイズが固定しないインライン要素を中央配置する</h2>

<div class="wrap2">
  <span class="target2">インライン要素</span>
</div>

<div style="width:100%;height:200px"></div>

CSS

html{margin:0;padding:0;}

body {
  margin: 0;
  padding: 10px;
  color: #363636;
  font-size: 90%;
  line-height: 1.6;
  background: #efefef;
}

pre {
  padding: 5px;
  border: 1px solid #000;
}

ins {
  color: #bf1212;
  text-decoration: none;
}

img {
  margin: 0;
  padding: 0;
}

.wrap2 {
  width: 100%;
  height: 300px;
  position: relative;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
}

.target2 {
  margin: -25%;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
  background: #afa6a9;
}