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

  

使用position: absolute;

实现div的居中对齐

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;
    }