jQuery ui ダイアログの制御ボタンの表示位置調整

久々に jQuery UI ダイアログのコードを書きました。ちょっとしたメモとしてここに残します。
何も気にせずに、マニュアルどおりに書けば、、、
HTML・・・ダイアログ表示させる div

<div id="dialog"></div>

ＪＳ・・・ダイアログ

var dlg = $('#dialog').dialog({
   autoOpen: false,
   modal: true,
   title: "タイトル",
   width: 320,
   height: 180,
   buttons: {
      "Yes": function(){
         $(this).dialog("close");
      },
      "No": function(){
         $(this).dialog("close");
      }
   },
   close: function(){
      $('#dialog').empty();
   },
});

表示の実行

$('#dialog').append("<h2>メッセージ</h2>");
dlg.dialog('open');

buttons: { } で書いたボタンは、ui-dialog-buttonpane の ui-dialog-buttonset として
以下の様に表示されます。

ボタンが右に寄ってしまい、ボタンの隙間が狭くて押し間違いの危険もあります。

なんとか、中央寄せにしてボタンの隙間もできるだけ均等にします。
ＣＳＳスタイルシートを、jquery-ui.css　の次に読み込むように、以下を記述します。

.ui-dialog-buttonset{
   width: 100%;
   display: flex;
   display: -webkit-flex;
   text-align: center;
   justify-content: space-around;
   -webkit-justify-content: space-around;
}

すると、以下のようにできます。

ここで使用した jQuery ui は以下のとおりです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>