水平居中(子元素于父元素水平居中且其（子元素與父元素）寬度均可變)

inline-block + text-align

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    display: inline-block;  }  .parent {    text-align: center;  }</style>
   優點：兼容性佳（甚至可以兼容 IE 6 和 IE 7）
table + margin
<div class="parent">  <div class="child">Demo</div></div><style>  .child {    display: table;    margin: 0 auto;  }</style>
     NOTE: display: table 在表現上類似 block 元素，但是寬度為內容寬。
  優點：無需設置父元素樣式 （支持 IE 8 及其以上版本）
      NOTE：兼容 IE 8 一下版本需要調整為 <table> 的結果
absolute + transform
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    left: 50%;    transform: translateX(-50%);  }</style>
  優點：絕對定位脫離文檔流，不會對后續元素的布局造成影響。
   缺點：transform 為 CSS3 屬性，有兼容性問題
flex + justify-content
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    justify-content: center;  }  /* 或者下面的方法，可以達到一樣的效果 */  .parent {    display: flex;  }  .child {    margin: 0 auto;  }</style>
  優點：只需設置父節點屬性，無需設置子元素
  缺點：有兼容性問題
  
垂直居中（子元素于父元素垂直居中且其（子元素與父元素）高度均可變）
table-cell + vertical-align
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: table-cell;    vertical-align: middle;  }</style>
  優點：兼容性好（支持 IE 8，以下版本需要調整頁面結構至 table）
absolute + transform
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    top: 50%;    transform: translateY(-50%);  }</style>
  優點：絕對定位脫離文檔流，不會對后續元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。
  缺點：transform 為 CSS3 屬性，有兼容性問題
flex + align-items
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    align-items: center;  }</style>
   優點 :只需設置父節點屬性，無需設置子元素
  缺點:有兼容性問題
水平與垂直居中（子元素于父元素垂直及水平居中且其（子元素與父元素）高度寬度均可變）
inline-block + text-align + table-cell + vertical-align
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    text-align: center;    display: table-cell;    vertical-align: middle;  }  .child {    display: inline-block;  }</style>
  優點:兼容性好
absolute + transform
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);  }</style>
   優點  絕對定位脫離文檔流，不會對后續元素的布局造成影響。
   缺點:  transform 為 CSS3 屬性，有兼容性問題
flex + justify-content + align-items
<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    justify-content: center;    align-items: center;  }</style>
優點: 只需設置父節點屬性，無需設置子元素
缺點:  有兼容性問題