這裡父元素和子元素的寬高都是不確定的，想實現子元素在父元素中的水平居中、垂直居中、水平垂直居中。下面列出了部分解決方法，如果大家有好的方法，歡迎留言~

一、水平居中

html程式碼如下：

<div class="parent">
    <div class="child">content</div>
</div>

要實現子元素child在父元素parent中水平居中顯示。

1、將子元素設為行內塊元素，父元素新增text-align:center屬性即可：

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}
 

2、給子元素新增左、右外邊距為auto即可：

.child{
    margin: 0 auto;
}

3、將父元素變成flex佈局，並新增justify-content：center屬性即可：

.parent{
    display: flex;
    justify-content: center;
}

 4、絕對定位

.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

二、垂直居中

html程式碼如下：

<div class="parent">
    <div class="child">content</div>
</div>
 

1、flex佈局

.parent{
    display: flex;
    align-items: center;
}

2、絕對定位

.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

 或者

.child{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

3、table-cell

需要將html改變為：

<div class="parent">
  <div class="box">
    <div class="child">content</div>
  </div>
</div>
 

 css程式碼為：

.parent{
    display: table;
}
.box{
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

三、水平垂直居中

html程式碼：

<div class="parent">
  <div class="child">content</div>
</div>

1、絕對定位

.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2、flex佈局

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

3、table-cell佈局

table-cell相當與表格的td，td為行內元素無法設定寬和高，所以巢狀一層，巢狀一層必須設定display: inline-block

html程式碼：

<div class="parent">
  <div class="box">
    <div class="child">content</div>
  </div>
</div>

 css佈局為：

.parent{
    display: table;
}
.box{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

4、絕對定位+margin：auto

.child{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}