如何在調整屏幕大小時將div放置在中心位置？

Question

我想使用卡布局顯示儀表板。理想情況下，我想實現以下佈局。 ：

HTML文件：

<div id="overallCanvasWrapper" class="statistic-container"> 
       <p ng-show="emptyAlltimeStats">No data available for given filters</p> 
       <div ng-show="!emptyAlltimeStats"> 
        <div class="header-piechart">Pie Chart</div> 
        <canvas id="pieCombined" class="chart chart-pie" chart-data="combinedData" chart-labels="labels" chart-options="options" 
         chart-colours="colours"> 
        </canvas> 
        <div class="chart-legend"> 
         <ul> 
          <li class="blue">Blue</li> 
          <li class="red">Red</li> 
         </ul> 
        </div> 
       </div> 
      </div> 

CSS文件：

canvas{ 
    width: 100% !important; 
    max-width: 450px; 
    height: auto !important; 
} 
.statistic-container { 
    padding: 10px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    margin-left: 0px; 
    margin-right: 0px; 
    padding-left: 5px; 
    padding-right: 5px; 
    height: 340px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    background-color: rgba(240,240,240,0.8); 
    background-blend-mode: soft-light; 
} 
.blue:before { background-color: #00aef3; } 
.red:before { background-color: #d8171e; } 

.chart-legend li:before { 
    display: block; 
    width: 5px; 
    height: 16px; 
    position: absolute; 
    left: 0; 
    top: 3px; 
    content: ""; 
} 

不過，我希望把圖表，傳說中的卡的剩餘部分的中心（水平和垂直）即使窗口調整大小。我怎樣才能做到這一點？

Answer 1

給canvas元素一個固定的寬度（例如：width = 300px）並使用規則margin：auto;例如：使用

canvas{ 
    width: 200px; 
    margin-left: auto; 
    margin-right:auto; 
    } 

.!emptyAlltimeStats{ 
    text-align:center; 
    } 

Answer 2

實現的div中心對準position: absolute;

canvas{ 
    width: 100% !important; 
    max-width: 450px; 
    height: auto !important; 
    position: relative; 
    } 
    .statistic-container { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
    margin: auto; 
    }