CSSを使っていると、画像やテキストの上や下に線を追加したいというときがあります。そんなときは:beforeや:afterなどの疑似要素を作成するのが一般的です。
追加した線（疑似要素）の位置を指定するときに、右から10pxや左から5pxと指定するのはとても簡単ですが、中央寄せをするにはコツが必要です。
ここでは、:beforeや:afterで追加した線（要素）を中央寄せにする方法を実例で解説しています。
左右中央寄せにする方法（leftとtranslateX）
左右中央寄せにするにはleftプロパティとtranslateプロパティのtranslateX関数を使います。
afterやbeforeで追加した線に以下のCSSを追加すれば完了です。
position: absolute;
left:50%;
transform: translateX(-50%);※translateXの値はマイナス50%です。
もしくrightを使っても指定できます。
position: absolute;
right:50%;
transform: translateX(50%);この場合はプラス50%になります。
実例（左右中央寄せ）
divタグで作った親要素のボックスに対して、:afterを使ってグレーの下線を中央に配置した例は下記になります。
親要素のボックス
:afterを追加
.demo-container{
display: flex;
}
/* 親要素 */
.image-box{
background: ivory;
text-align: center;
padding: 20px;
margin: 20px;
width: 200px;
position: relative;
}
/* 疑似要素 */
.image-box:after{
content: "";
width: 100px;
height: 3px;
background: gray;
position: absolute;
left:50%;
transform: translateX(-50%);
} <div class="demo-container">
<div class="image-box box1">
<h2>親要素のボックス</h2>
<p>:afterを追加</p>
</div>
</div>親要素からはみ出すときの対処法
left: 50%;を指定したことで、:beforeや:afterの疑似要素が親要素からはみ出してしまうという場合は、親要素にposition: relative;を設定してください。詳細は下記をご参考ください。
上下中央に配置する方法（topとtranslateYとtranlateX）
もし上下中央（ど真ん中）を中心として配置したい場合は、translateXだけでなくtranslateYも使います。
position: absolute;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);グレーの線が親要素のボックスの中心にきていることがわかります。
親要素のボックス
:afterを追加
.demo-container{
display: flex;
}
/* 親要素 */
.image-box{
background: ivory;
text-align: center;
padding: 20px;
margin: 20px;
width: 200px;
position: relative;
}
/* 疑似要素 */
.image-box:after{
content: "";
width: 100px;
height: 3px;
background: gray;
position: absolute;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
} <div class="demo-container">
<div class="image-box box1">
<h2>親要素のボックス</h2>
<p>:afterを追加</p>
</div>
</div>