javascript - CSS는 div가 항상 가로 및 세로 중앙에 오도록 제어하며 이 div의 크기는 다릅니다.

Question

Css 컨트롤은 통일된 클래스 이름으로 p를 추가합니다. 중앙에 가로와 세로로 표시되기를 원합니다. 그런데 p의 크기가 달라서 다른 학생들은 수정할 수 없나요?

Answer 1

유연한 레이아웃

으아악

Answer 2

하나는 플렉스 레이아웃을 사용하여 하위 요소를 수평 및 수직으로 중앙에 배치하는 것이고, 다른 하나는 절대 위치 지정 및 변환을 사용하여 위치를 이동하는 것입니다.
.flex {
디스플레이: flex;
정렬 항목: 센터;
justify-content: 센터;
}

.one {
위치: 절대;
왼쪽: 50%;
위쪽: 50%;
변환: 번역(-50%, -50%);
}

포털

Answer 3

수직 센터링:
테이블 레이아웃 방법, 인라인 블록 방법
절대 위치 지정 방법
뷰포트 센터링
flexbox 기반 솔루션

Answer 4

자주 묻는 질문인데, 해외의 누군가가 다양한 상황에서 수직 중심 정렬을 정리했습니다: https://css-tricks.com/center...

우리는 귀하를 위해 직접 코드를 생성하고 IE와 호환되는지 고려합니다: http://howtocenterincss.com/

번역된 버전도 확인하실 수 있습니다: https://github.com/chenjsh36/...

이 글을 읽고 나면 더 이상 다양한 수직 센터링 문제로 고민할 필요가 없습니다 23333

Answer 5

상위 요소에 display:flex,align-items:center 추가

Answer 6

위의 탄력적 레이아웃을 사용할 수 있지만 하위 수준 브라우저는 지원하지 않습니다.
절대 위치 지정을 사용하여 p를 수직 및 수평 중앙에 배치할 수 있습니다

으아악

Answer 7

플렉스 레이아웃도 추천드려요

Answer 8

다양한 탄성 레이어? 다양한 계산? 왼쪽과 오른쪽 센터링은 쉽습니다. 단지

margin:0 auto;
는 괜찮지만 위아래로 이동하는 것이 좀 더 번거롭습니다. 여러모로 귀찮지만

1. js로 판단하면 상대적으로 번거로워서 자세한 내용은 다루지 않겠습니다. js를 쉽게 이해할 수 있는 친구들은 할 수 있습니다

2, 비활성화:테이블 두 DOM의 협력이 필요합니다. 주요 호환성도 평균입니다.

3. 호환성을 고려하지 않고 높이를 모른다면 transfrom을 사용하는 것이 좋습니다. 대략적인 방법은 다음과 같습니다.

.dom{

너비를 직접 정의하세요
위치: 절대;
변환: 이동(-50%, -50%);
왼쪽: 50%;
위쪽: 50%;
}
너비는 알지만
얼마나 강력히 추천하는지 모르겠습니다.

4. 너비와 높이를 알고 있다면 위의 내용은 필요하지 않습니다. 이는 호환되지 않는 코드입니다.

.dom{

너비와 높이를 직접 정의하세요.
위치: 절대;
여백: 자동;
위쪽:0;
오른쪽: 0;
아래쪽:0;
왼쪽: 0;
}
5, flex 레이아웃, 호환성 외에 다른 건 다 괜찮습니다.

<p class="mask">

으아악

</p>

.mask{
으아악

}

.mask-con{
으아악

}

6. 호환성을 고려하신다면 ====> 첫 번째 항목을 검토해 주세요. [몇살이시죠? 아직도 IE789를 고려하면 기본 IE7 DOM1 지원이 별로 좋지 않아서요. . . 】
7, 다른 건 없어요. 위의 것만으로도 충분합니다. 좋은거 있으면 추가해주세요

Answer 9

부모 요소

으아악

하위 요소

으아악

Answer 10

세 가지 방법이 더 추가되었습니다.

• 절대 또는 고정 위치 지정을 사용하여 너비와 높이가 알려진 요소를 중앙에 배치합니다.

  으아악

• display: table 레이아웃 중심 요소를 채택하고 무한한 너비와 높이를 지원하며 IE8+ 및 기타 최신 브라우저와 호환됩니다.

  으아악

• :before 의사 요소는 줄 높이를 확장합니다(모달 구성 요소의 AmazeUI에서 사용하는 방법, 불확실한 너비와 높이 지원, IE8+):

  으아악