[html] 전체 HTML 본문을 중앙에 정렬하는 방법은 무엇입니까?

Question 1

전체 HTML 본문을 중앙에 어떻게 정렬합니까?

Question 2

나는 방금이 오래된 게시물을 우연히 만났고 user01이 그의 답변을 찾은 지 오래되었지만 현재 답변이 제대로 작동하지 않는다는 것을 알았습니다. 다른 사람들이 제공 한 정보를 사용하여 조금 놀다가 IE, Firefox 및 Chrome에서 작동하는 솔루션을 찾았습니다. CSS에서 :

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

이것은 abernier의 대답과 거의 동일하지만 너비를 포함하면 자동 여백을 생략하는 것처럼 중심이 깨지는 것을 발견했습니다. 이 스레드에서 우연히 발견 한 다른 사람이 내 대답이 도움이되기를 바랍니다.

참고 :html, body { height: 100%; } 가로로만 중앙에 배치하려면 생략 하십시오 .

Question 3

당신은 시도 할 수 있습니다:

body{ margin:0 auto; }

Question 4

편집하다

오늘부터 flexbox를 사용하면

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

이전 답변

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

Question 5

내가 CSS와 관련하여 공유하고 싶은 것이 하나 있다면, 그것은 두 축을 따라 사물 을 중심으로하는 나의 가장 좋은 방법입니다 !!!

이 방법의 장점 :

사람들이 실제로 사용하는 브라우저와의 완벽한 호환성
테이블이 필요하지 않습니다
부모 내부의 다른 요소를 중앙에 배치하는 데 매우 재사용 가능
동적 (변화하는) 차원으로 부모와 자식을 수용합니다!

저는 항상 2 개의 클래스를 사용합니다. 하나는 콘텐츠가 중앙에 위치 할 부모 요소를 지정하는 클래스 ( .centered-wrapper)와 두 번째 클래스는 부모의 어떤 자식이 중앙에 위치 할 것인지 지정하는 클래스 ( .centered-content)입니다. 이 두 번째 클래스는 부모에게 여러 자식이 있지만 하나만 중앙에 배치해야하는 경우에 유용합니다. 이 경우 body는 .centered-wrapper이고 내부 div는입니다 .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

중심에 대한 아이디어는 지금 있도록하는 것입니다 .centered-content을 inline-block. 이 것입니다 쉽게 통해 수평 중심을 촉진 text-align: center;하고, 당신이 보 겠지만 또한 수직 센터링 수 있습니다.

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

이것은 당신에게 어떤 부모의 내부에 모든 아이를 집중시키기 위해 정말로 재사용 가능한 2 개의 클래스를 제공합니다! .centered-wrapper및 .centered-content클래스를 추가하기 만하면 됩니다.

그렇다면 그 :before요소는 무엇입니까? vertical-align: middle;수직 정렬은 부모의 높이와 관련이 없기 때문에 용이 하고 필요합니다. 수직 정렬은 가장 큰 형제의 높이에 상대적입니다 !!! . 따라서 높이가 부모의 높이 (높이 100 %, 보이지 않게하려면 너비 0) 인 형제가 있는지 확인함으로써 수직 정렬이 부모의 높이에 대해 이루어짐을 알 수 있습니다.

마지막으로 한 가지 : html및 body태그가 창의 크기 인지 확인하여 중앙에 배치하는 것이 브라우저 중앙에 배치하는 것과 동일하도록해야합니다!

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

바이올린 : https://jsfiddle.net/gershy/g121g72a/

Question 6

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0;
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Question 7

에서 flexbox를 사용합니다 html. 좋은 효과를 얻으려면 브라우저 크롬을 일치시켜 페이지 최대 값보다 큰 화면 크기로 콘텐츠를 구성 할 수 있습니다. 나는 그것이 #eeeeee꽤 잘 어울리는 것을 알았다 . 멋진 플로트 효과를 위해 상자 그림자를 추가 할 수 있습니다.

    html{
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

이미지 / 데이터 제공 StatCounter

Question 8

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

CSS를 적용하기 전에이 스타일을 적용하십시오. 필요에 따라 너비를 변경할 수 있습니다.