css居中、垂直居中、水平居中

<!--  居中顯示-->
  <div>
  <div style="display: table-cell;vertical-align: center;text-align: center;
  width: 200px;height: 300px;background-color: #ff7900;line-height: 300px ">
      <div>
          <button>
             1
          </button>
          <span>
             2
          </span>
      </div>
  </div>
  <!-- 水平居中顯示 可改動justify-content 調整一些內部元素的顯示位置-->
  <div style="display: flex;justify-content: center;">
      <span>1</span>
      <span>2</span>
  </div>
      <!-- 水平居中   margin: 0 auto ;   垂直居中顯示 margin:  auto  0; -->
     <div>
         <div style=" text-align: center;
      background-color: deepskyblue;
      border-radius: 20px;
      width: 100px;
      height: 100px;
      margin: 0 auto ;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;">
             1
         </div>
     </div>
  </div>