CSS 레이아웃 - 수평 및 수직 정렬

가운데 정렬 요소

<div>와 같이 블록 요소를 가로로 가운데 맞추려면 margin: auto;

요소의 너비를 설정하면 해당 요소의 가장자리까지 늘어나지 않습니다.

요소는 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 균등하게 분할됩니다.

.center {

    margin: auto;

    width: 50%;

    border: 3px solid green;

    padding: 10px;

}

참고 :width 속성을 설정하지 않으면 (또는 100 %로 설정 한 경우) 가운데 맞춤은 효과 가 없습니다.

<!DOCTYPE html>

<html>

<head>

<style>

.center {

    margin: auto;

    width: 60%;

    border: 3px solid #73AD21;

    padding: 10px;

}

</style>

</head>

<body>

<h2>Center Align Elements</h2>

<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">

  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>

</div>

</body>

</html>