【吹き出しの先端を中央寄せするCSS】

画像でもCSSでもどちらでも可能ですが、
吹き出しなどの先端を中央寄せする方法。
　

<親要素>
  <子要素>
  </子要素>
</親要素>

　
のように、吹き出しの枠に相当するボタンなどを
親要素とし、その内側に子要素を配置して先端を
表示するタグの役目を負わせます。
　
親要素の位置を基準として子要素の位置を
指定できるようにするために、
親要素にはposition:static以外を指定し、
子要素にはposition:absoluteを指定します。
　
子要素の存在が、親要素内の他のテキスト等の
適切な配置を邪魔しないように、子要素自身の
配置は text-align でもなく margin の左右 auto
でもなく、position:absolute で指定します。
　
この場合、left: 50% でいったん親要素の左端から
半分の位置まで子要素を移動させ、子要素の横幅
のちょうど半分だけ左へ引き戻してあげれば、
理屈上も正確な中央寄せになります。
　
吹き出しの先端が横幅16pxの場合だと、

position: asbolute;
left: 50%;
margin-left: -8px;

　
とすればOKです。
　
ただしこの方法は、中央寄せする子要素の横幅に
依存します。レスポンシブで、PCとスマホとで
アイコン等の大きさが異なる場合、margin-leftを
メディアクエリで分岐させるなどいちいち注意を
払わねばなりません。
　
そこでCSS3の transform を使います。
　

position: asbolute;
left: 50%;
transform: translateX(-50%);

　
translateは、指定した要素自身のサイズを100%
とする移動を表すので、吹き出し先端の大きさに
関係なく常に吹き出し先端の横幅の半分だけ左に
移動してくれます。
　
任意のボックスの上下左右中央（ド真ん中）に
配置したいときは、親要素にposition:static以外を
指定した上で、子要素に以下を指定します。
　

position: asbolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

　
CSSデザインにおいて、position プロパティや
margin, padding などボックスモデルの概念は
photoshopなど画像ソフトで必須の「レイヤー」
と同じくらい重要です。