div 내에서 div를 중앙에 배치하는 방법

나는 이것을 한 번 이상 googled하지 않은 웹 개발에서 일하는 영혼을 만난 적이 없다고 생각합니다. 당신이 처음이고 첫 번째 프로젝트를 끝내려고 노력하든, 나처럼 프로젝트를 시작하면 배운 모든 것을 즉시 잊어버리든, 이것은 고착되는 데 시간이 걸리는 개념 중 하나일 뿐입니다. 어느 쪽이든 나는 판단하지 않을 것이고 당신의 시간을 낭비하지 않을 것입니다. 이 작업을 수행하는 방법에는 여러 가지가 있습니다. 나는 그것을 간단하게 유지하고 당신에게 나의 이동을 보여줄 것입니다.

안녕하세요 플렉스박스👋

대부분의 웹 페이지의 목표는 반응형으로 만드는 것이므로 flexbox를 사용하면 미디어 쿼리 작업을 할 때 많은 작업을 줄일 수 있습니다.

전제 조건

본문과 HTML 모두의 높이 CSS 속성이 100%로 설정되어 있는지 확인하십시오

.

상위 컨테이너의 display CSS 속성이 flex로 설정되어 있는지 확인하십시오

.

이제 다음과 같이 일부 CSS 및 HTML을 적용할 수 있습니다.

HTML

<div id="flex-container">
    <div>
        I am centered
    </div>
</div>

CSS

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

#flex-container {
display: flex;
height: 100vh;
background-color: #31493C;
justify-content: center;
align-items: center;
}

#flex-item {
background-color: #FCA311;
}

결과:


창 크기를 조정할 때:


단순한. 이제 당신이 초보자라면 무언가에 대해 생각하기를 바랍니다. 이 코드에는 "flex-container"가 가장 바깥쪽 컨테이너가 아닌 경우 문제를 일으킬 수 있는 줄이 있습니다. 완전히 이해하지 못하는 코드를 복사하면 안 되기 때문에 이렇게 했습니다. 아래 댓글에서 어떤 라인이 잠재적인 문제인지 알려주거나… 둘 다 받아들입니다.