부모 컨테이너의 높이 백분율로 여백 또는 패딩을 설정하는 방법은 무엇입니까?

나는 다음을 사용하여 CSS에서 수직 정렬을 만드는 것에 대해 내 두뇌를 쌓아 두었다.

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

이것이이 경우에는 효과가있는 것처럼 보이지만 기본 div의 너비를 늘리거나 줄이면 세로 정렬이 스냅됩니다. padding-top 속성을 설정할 때 부모 컨테이너 높이의 백분율로 패딩을 취할 것으로 기대했지만 우리의 경우 기본 값이지만 위의 50 % 값은 폭. :(

JavaScript를 사용하지 않고 패딩 및 / 또는 여백을 높이의 백분율로 설정하는 방법이 있습니까?

수정 네, 수직 패딩과 마진의 폭을 기준이지만,이다 top와 bottom 아니다.

그래서 또 다른 내부 사업부를 배치하고 같은 내부 사업부에서 사용 무언가 top:50%(기억 position이 여전히 작동하지 않으면 문제를)

약간 다른 질문에 대한 답변 : vh단위를 사용 하여 요소를 뷰포트 중앙에 채울 수 있습니다 .

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>

필요한 동작을 에뮬레이트하는 두 가지 옵션이 있습니다. 일반적인 해결책은 아니지만 경우에 따라 도움이 될 수 있습니다. 여기서 수직 간격은 부모가 아닌 외부 요소의 크기를 기준으로 계산되지만이 크기 자체는 부모를 기준으로 할 수 있으며 간격도 상대적입니다.

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

첫 번째 옵션 : 의사 요소를 사용하십시오. 여기서 세로 및 가로 간격은 바깥 쪽을 기준으로합니다. 데모

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

수평 간격을 외부 요소로 이동하면 외부 요소의 부모를 기준으로합니다. 데모

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

두 번째 옵션 : 절대 위치 지정을 사용하십시오. 데모

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

자식 요소를 부모 요소에서 절대적으로 배치하려면 부모 요소의 상대 위치와 자식 요소의 절대 위치를 설정해야합니다.

그런 다음 자식 요소 'top'은 부모의 높이와 관련이 있습니다. 따라서 자녀의 키를 자신의 키의 50 %로 상향 변환해야합니다.

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

    <div class="base">
        <div class="vert-align">
            Content Here
        </div>
    </div>

플렉스 박스를 사용하는 또 다른 해결책이 있습니다.

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

당신은 둘 다에 대한 장점 / 불만을 찾을 수 있습니다.

이것은 writing-mode속성 으로 달성 할 수 있습니다 . 요소 writing-mode를 세로 쓰기 모드 (예 :와 같이)로 설정하면 vertical-lr두 차원에서 패딩 및 여백에 대한 하위 항목의 백분율 값이 너비 대신 높이를 기준으로합니다.

로부터 사양 :

. . . CSS2.1의 포함 블록 너비와 관련하여 항상 계산되는 margin 및 padding 속성의 백분율 은 CSS3의 포함 블록 의 인라인 크기 와 관련하여 계산됩니다 .

인라인 크기 의 정의 :

인라인 치수 측정 : 가로 쓰기 모드의 실제 너비 (가로 치수) 및 세로 쓰기 모드의 실제 높이 (세로 치수)를 나타냅니다.

예를 들어, 크기 조정 가능한 요소가있는 경우, 가로 여백은 너비를 기준으로하고 세로 여백은 높이를 기준으로합니다.

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

세로 쓰기 모드를 사용하면 요소의 가로 세로 비율을 일정하게 유지하려고하지만 너비 대신 높이에 따라 크기를 조정하려는 경우에 특히 유용 할 수 있습니다.

한 줄 텍스트를 가운데에 맞추는 다른 방법은 다음과 같습니다.

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

아니면 그냥

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

50 % 패딩은 자녀를 중앙에 배치하지 않으며 중앙 아래에 배치합니다. 나는 당신이 정말로 25 %의 패딩 탑을 원한다고 생각합니다. 콘텐츠가 커질수록 공간이 부족할 수 있습니다. 또한 padding-top 대신 margin-top을 설정해 보셨습니까?

편집 : 신경 쓰지 마라, w3schools 사이트는 말합니다

% 포함 요소 너비의 백분율로 패딩을 지정합니다.

어쩌면 항상 너비를 사용합니까? 나는 눈치 채지 못했다.

display : table을 사용하여 수행 할 수 있습니다 (적어도 최신 브라우저에서는). 이 기술은 여기에 설명되어 있습니다 .

이것은 매우 흥미로운 버그입니다. (제 생각에는, 그것은 버그입니다) Nice find!

그것을 설정 하는 방법 에 관해서 는 Camilo Martin의 답변을 추천합니다. 그러나 왜 , 나는 당신이 마음에 들지 않으면 이것을 조금 설명하고 싶습니다.

에서 CSS의 사양 내가 발견

'패딩'
백분율 : 포함 블록의 너비 참조

… 이상하지만 괜찮습니다.

따라서 부모 width: 210px와 자식의 padding-top: 50%경우 계산 / 계산 된 값 padding-top: 96.5px– – 예상치가 아닙니다 105px.

Windows (다른 OS에 대해서는 잘 모르겠습니다)에서 공통 스크롤 막대의 크기는 기본 17px × 100%(또는 100% × 17px가로 막대)입니다. 이들은 17pxsubstracted되어 전에 를 산출 50%따라서 50% of 193px = 96.5px.