<！doctype html>
<html>
<head>
</head>
<body>
<div style = "text-align：center;">
  <button type = 'button' style = "box-shadow：3px 2px"> 1）影付きの私のボタン</button>
  <br> <br>
  <button type = 'button' style = "box-shadow：3px 2px 3px"> 2）ぼやけた影のある私のボタン</button>
  <br> <br>
  <ボタンタイプ= 'button' style = "box-shadow：3px 2px 3px purple"> 3）ぼやけた紫色の影</button>
  <br> <br>
  <button type = 'button' style = "text-shadow：3px 2px 3px purple"> 4）テキストにぼやけた紫色の影が付いた私のボタン</button>
</div>
</body>
</html>


この変更されたコードでは、ボタンを「div」要素にラップし、「テキストアライグ」プロパティを「センター」に設定しました。これにより、Div内のすべてのボタンを中心に調整します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="text-align:center;">
  <button type='button' style="box-shadow:3px 2px">1) My button with a shadow</button>
  <br><br>
  <button type='button' style="box-shadow:3px 2px 3px">2) My button with a blurry shadow</button>
  <br><br>
  <button type='button' style="box-shadow:3px 2px 3px purple">3) My button with a blurry purple shadow</button>
  <br><br>
  <button type='button' style="text-shadow:3px 2px 3px purple">4) My button with a blurry purple shadow on its text</button>
</div>
</body>
</html>


In this modified code, we have wrapped the buttons in a 'div' element and set its 'text-align' property to 'center'. This will center-align all the buttons within the div.