如何在调整屏幕大小时将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; 
    }