CSS에서 중앙에 배치하는 방법 💘
개발자 여러분! 🔥
"CSS에서 중심을 맞추는 방법"에 대한 빠른 가이드 🙌
Most of the time, you write great CSS code from colors to complex animations.
But I know most of us (beginners) still struggle to center elements on a viewport perfectly.
개발자는 걱정하지 마십시오. 이 짧은 가이드가 끝나면 더 이상 멍청이가 아닙니다.
시작하자
웹 페이지에서 HTML 요소를 가운데에 맞추는 방법에는 두 가지가 있습니다.
1. 플렉스박스 사용하기
2. 변환 사용
HTML code as shown below 👇
<body>
<div class="container">
<div id="object"></div>
</div>
</body>
Now the CSS code
html,
body,
.container {
height: 100%;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
}
#object {
height: 100px;
width: 100px;
background: red;
align-self: center;
}
HTML code shown below 👇
<body>
<div class="element"></div>
</body>
Now the CSS code
.element
{
width: 100px;
height: 100px;
background: coral;
}
.element
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
제 다른 포스팅도 구경해보세요 🥂
작가:
Reference
이 문제에 관하여(CSS에서 중앙에 배치하는 방법 💘), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mindset/how-to-center-things-in-css-2obo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
