중앙 Div 웹 페이지에서 중앙 Div의 다른 방식
Disclaimer: Some of these methods are not optimal, it is just like a test how far my creative mind can go.
이곳의 모든 해결 방안에 대해 이것은 우리의 시작 코드가 될 것이다.우리는 블로그에 가입하는 것을 환영하는 가상 카드부터 시작할 것이다.
br 태그를 사용하여 CSS를 몇 줄만 삭제했습니다.<div class="card-holder">
<div class="card">
<h1>Hello There👋</h1>
<br>
<p>Welcome to my blog</p>
<br>
<button>Get Started!</button>
</div>
<div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-holder{
width: 100vw;
min-height: 100vh;
}
.card{
background: #45CE30;
padding: 20px;
width: 80%;
max-width: 500px;
text-align: center;
font-family: Arial;
}
div 설정 card-holder 을 사용합니다.이것은 유익할 것이다.마지막으로, 어떤 스타일은 카드에 적용되고, 그것에 배경과 채우기를 주고, 그리고 나는 넓이와 최대 넓이를 지정했다. 이렇게 하면 큰 화면에서 그렇게 커 보이지 않을 것이다.그리고 나서 나는 모든 텍스트를 중심에 맞추고 아리얼 글꼴 시리즈를 주었다.이 모든 조정을 거친 후에 우리 카드는 약간 이렇게 보일 것이다.
우리가 노력한 결과:
1. Flexbox 방식:
나는 보통 flexbox 방법을 사용하여 div를 웹 페이지의 중심에 놓는다.이를 위해 외부 div (즉 카드를 가진 사람) 의 CSS 를 수정하여 flex로 표시해야 합니다. 그리고
justify-content 와 align-items 가'중심'에 있어야 합니다.따라서 코드가 변경되었습니다..card-holder{
/* other base styles go here */
display: flex;
justify-content: center;
align-items: center;
}
2. 절대 포지셔닝:
그러려면 부모 요소의 위치를 상대 위치로 설정해야 합니다.이 옵션을 설정하면 하위 요소를 절대 요소로 지정할 수 있습니다.그리고 우리는 하위 요소를 위에서 50%, 왼쪽에서 50%를 이동할 수 있다.따라서 이 단계에서 CSS는 다음과 같이 보일 것이다.
.card-holder{
/* other base styles go here */
position: relative;
}
.card{
/* other base style */
position: absolute;
top: 50%;
left: 50%;
}
만약 네가 자세히 관찰한다면, 너는 우리 카드의 왼쪽 상단이 페이지 중앙에 있다는 것을 알아차릴 것이다.그래서 우리는 지금 카드를 이동해야 한다.카드를 크기에 상관없이 이동하는 가장 간단한 방법 중 하나는
transform CSS 속성을 사용하는 것이다.현재, 우리는 이 CSStransform 속성으로 많은 것을 설정할 수 있습니다. 그 중 하나는translate입니다. 이 요소는 주위의 다른 요소를 바꾸지 않고 이동할 수 있습니다.이transformtranslate의 가장 좋은 점은 백분율 값을 받을 수 있다는 것이다. 이 백분율은 우리가 이 스타일을 응용하는 요소의 너비와 높이에 따라 계산된다.따라서transformtranslateX와translateY를 각각 -50%로 설정하면 카드를 왼쪽으로 이동하고 위로 이동하여 그 중심이 왼쪽 상단 이전의 위치에 이르게 합니다.이 행 코드는 다음과 같이 보입니다.
.card{
/* other base style */
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
3. 메쉬 템플릿 및 위치 지정:
CSS 메쉬와 Flexbox가 나타나면 게임 규칙이 변경됩니다.그것들을 도입한 것은 웹 개발자들이 "당시 유행했던"부동을 사용하지 않도록 하고 부동의 번거로움을 없애기 위해서이다.메쉬를 사용하면 거의 모든 레이아웃을 만들 수 있습니다.
따라서 우리의 개념은 3X3 격자를 설명하고 우리의 카드를 중간 격자에 놓는 것이다.이를 위해, 카드를 가진 사람을 격자로 표시하고, 그 격자를 세 줄 세 열 템플릿으로 표시해야 한다.따라서 필요한 CSS는 다음과 같습니다.
.card-holder{
/* other base styles go here */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
지금, 우리는 카드를 중심 격자에 놓아야 한다.이를 위해, 우리는
grid-row 및 grid-column 속성을 사용하여 격자 항목이 어떤 격자선 사이에 보존되어야 하는지를 선택할 수 있다.메쉬 라인 번호는 다음과 같이 보입니다.
따라서 줄 번호를 자세히 살펴보면 열과 줄에 카드를 놓아야 하는 격자선 1~2곳을 바로 알 수 있습니다.따라서 이 코드는 다음과 같이 보입니다.
.card{
/* other base style */
grid-row: 2/3;
grid-column: 2/3;
}
현재, 당신은 이div가 정확하게 가운데에 있지 않은 것을 보게 될 것입니다.이를 위해 우리는
margin: 0 auto; 카드를 가운데에 놓을 수 있다.그러나 그 이후에는 카드 안의 내용이 수직으로 정렬되지 않는다.이를 위해 HTML을 변경해서 카드의 내용을 다른 div에 넣어야 합니다. 그리고 카드를 3열로 나누어 중간 카드에 넣어야 합니다.따라서 HTML 및 CSS의 변화는 다음과 같습니다.
<body>
<div class="card-holder">
<div class="card">
<div>
<h1>Hello There👋</h1>
<br>
<p>Welcome to my blog</p>
<br>
<button>Get Started!</button>
</div>
</div>
<div>
</body>
.card{
/* other default style */
grid-row: 2/3;
grid-column: 2/3;
margin: 0 auto;
display: grid;
grid-template-rows: 1fr 6fr 1fr;
}
.card div{
grid-row: 2/3;
}
현재, 이러한 방법은 비교적 작은 화면 크기를 수정해야 한다. 이것은 미디어 조회를 통해 쉽게 완성할 수 있으며,
grid-template-columns 의 .card-holder 를'1fr 5fr 1fr'와 유사한 내용으로 설정할 수 있다.내 예에서는 모바일 장치에서 이렇게 보이도록 설정합니다. 이를 위해 다음 코드를 사용했습니다.
@media (max-width: 768px){
.card-holder{
grid-template-columns: 1fr 6fr 1fr;
}
.card{
padding: 20px;
}
}
영예상 1: 내가 시도한 첫 번째 방법
이런 방법에서, 나는 카드의 여백을'자동'으로 설정하고 싶을 뿐, 여백을 수평 중심에 자동으로 설정한 후에 수직 여백에 대해 같은 조작을 할 것이라고 생각한다.그러나 안타깝게도 상황은 그렇지 않다.수직 여백을 0으로 설정하면 기본적으로 0이 됩니다.
영예상2: 만약 당신이 단지 한 텍스트를 중간에 놓았을 뿐이라면, 당신은 다른 어떤 것도 필요로 하지 않는다
이 경우 HTML은 다음과 같이 보입니다.
<body>
<div class="card-holder">
<h1>Hello World!</h1>
<div>
</body>
.card-holder{
width: 100vw;
min-height: 100vh;
}
h1{
font-size: 4rem;
font-family: Arial, Helvetica, sans-serif;
}
이제 우리는 h1의 두 줄 CSS를 통해 이 점을 바꿀 수 있다.
h1{
font-size: 4rem;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 100vh;
}
최종 판결
이것은 단지 재미있는 댓글일 뿐, 단지 나의 CSS 기술을 테스트할 뿐이다.만약 이것이 실제 프로젝트라면, 나는 방법 1을 중심으로 하는div를 사용할 것입니다. 만약 당신이 다른 방법을 알고 있다면, 나에게 알려 주십시오.
Reference
이 문제에 관하여(중앙 Div 웹 페이지에서 중앙 Div의 다른 방식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ayushmanbthakur/different-ways-to-center-a-div-in-a-webpage-5enn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
