place-content: center를 사용하는 전체 너비 CSS 그리드 항목
P粉245003607
2023-09-05 17:54:47
<p>CSS Grid의 <code>place-content: center</code>를 사용하여 다음과 같이 div를 고정 컨테이너의 수직 및 수평 중앙에 배치했습니다. </p>
<p>
<pre class="brush:css;toolbar:false;">.outer {
위치: 고정;
삽입: 0;
배경: 검정색;
디스플레이: 그리드;
장소 내용: 센터;
}
.내부 {
패딩: 30px;
배경: 흰색;
너비: 100%;
최대 너비: 500px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="outer">
<div class="inner">여기에 일부 콘텐츠</div>
</p>
<p>내부 div를 최대 너비 500px로 전체 너비로 만들고 싶지만 예상대로 <code>width: 100%</code> 속성을 준수하지 않는 것 같습니다. </p>
<p> 가능하다면 그리드 구현을 유지하면서 이런 일이 발생하는 이유와 해결 방법을 설명할 수 있습니까? (이와 같은 것을 중앙에 두는 다른 방법이 있다는 것을 알고 있지만 호기심으로 이것을 만들어 보고 싶었습니다. 무엇보다 중요해요!)</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
그리드 대신 플렉스를 사용하면 아주 쉽게 할 수 있습니다.
그리드 항목에
place-self，而不是使用place-content를 사용할 수 있습니다.