方法一：基于絕對定位的解決辦法：它要求元素具有固定的寬度和高度

main{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3em;    /* 6/2 = 3 */ 
  margin-left: -9em;     /* 18/2 = 9   */ 
  width: 18em;
  height: 6em;
}
或者
main{
  position: absolute;
  top: calc(50% - 3em);
  left: calc(50% - 9em);
  width: 18em;
  height: 6em;
}
//或者
//絕對定位與margin
#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    width: 100px;
    height: 100px;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

顯然，這個方法最大的局限在于它要求元素的寬高是固定的。在通常情 況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。

如果 能找到一個屬性的百分比值以元素自身的寬高作為解析基準，那我們的難題 就迎刃而解了!遺憾的是，對于絕大多數(shù) CSS 屬性(包括 margin)來說， 百分比都是以其父元素的尺寸為基準進行解析的。

CSS 領域有一個很常見的現(xiàn)象，真正的解決方案往往來自于我們最 意想不到的地方。在這個例子中，答案來自于 CSS 變形屬性。當我們在 translate() 變形函數(shù)中使用百分比值時，是以這個元素自身的寬度和高度 為基準進行換算和移動的，而這正是我們所需要的。接下來，只要換用基于 百分比的 CSS 變形來對元素進行偏移，就不需要在偏移量中把元素的尺寸 寫死了。這樣我們就可以徹底解除對固定尺寸的依賴:

方法二：（css3不需要知道高度）

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em 1.5em;
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
}

body {
    background: #fb3;
    font: 100%/1.5 sans-serif;
}

方法三：基于 Flexbox 的解決方案（不需要知道寬高）

請注意，當我們使用 Flexbox 時，margin: auto 不僅在水平方向上將元 素居中，垂直方向上也是如此

body {
    display: flex;
    min-height: 100vh;
}
main {
    padding: 1em 2em;
    margin: auto;
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
}

方法四：display:table-cell(不需要知道寬高）
父級元素設置display:table-cell;此元素會作為一個表格單元格顯示，類似td,th

//兼容性比較好IE8及以上 以及一些主流瀏覽器
div.parent{
  display:table-cell;
  vertical-align: middle; 
  text-align: center;
}

方法五：基于視口單位的解決方案
此辦法太過局限，當作沒有為好。