화면의 크기를 조정할 때 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 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; 
    }