javascript - CSS는 div가 항상 가로 및 세로 중앙에 오도록 제어하며 이 div의 크기는 다릅니다.
Css 컨트롤은 통일된 클래스 이름으로 p를 추가합니다. 중앙에 가로와 세로로 표시되기를 원합니다. 그런데 p의 크기가 달라서 다른 학생들은 수정할 수 없나요?
Css 컨트롤은 통일된 클래스 이름으로 p를 추가합니다. 중앙에 가로와 세로로 표시되기를 원합니다. 그런데 p의 크기가 달라서 다른 학생들은 수정할 수 없나요?
过去多啦不再A梦2017-06-26 10:54:35
하나는 플렉스 레이아웃을 사용하여 하위 요소를 수평 및 수직으로 중앙에 배치하는 것이고, 다른 하나는 절대 위치 지정 및 변환을 사용하여 위치를 이동하는 것입니다.
.flex {
디스플레이: flex;
정렬 항목: 센터;
justify-content: 센터;
}
.one {
위치: 절대;
왼쪽: 50%;
위쪽: 50%;
변환: 번역(-50%, -50%);
}
포털
过去多啦不再A梦2017-06-26 10:54:35
자주 묻는 질문인데, 해외의 누군가가 다양한 상황에서 수직 중심 정렬을 정리했습니다: https://css-tricks.com/center...
우리는 귀하를 위해 직접 코드를 생성하고 IE와 호환되는지 고려합니다: http://howtocenterincss.com/
번역된 버전도 확인하실 수 있습니다: https://github.com/chenjsh36/...
이 글을 읽고 나면 더 이상 다양한 수직 센터링 문제로 고민할 필요가 없습니다 23333
巴扎黑2017-06-26 10:54:35
위의 탄력적 레이아웃을 사용할 수 있지만 하위 수준 브라우저는 지원하지 않습니다.
절대 위치 지정을 사용하여 p를 수직 및 수평 중앙에 배치할 수 있습니다
PHP中文网2017-06-26 10:54:35
다양한 탄성 레이어? 다양한 계산? 왼쪽과 오른쪽 센터링은 쉽습니다. 단지
margin:0 auto;
는 괜찮지만 위아래로 이동하는 것이 좀 더 번거롭습니다. 여러모로 귀찮지만
1. js로 판단하면 상대적으로 번거로워서 자세한 내용은 다루지 않겠습니다. js를 쉽게 이해할 수 있는 친구들은 할 수 있습니다
2, 비활성화:테이블 두 DOM의 협력이 필요합니다. 주요 호환성도 평균입니다.
3. 호환성을 고려하지 않고 높이를 모른다면 transfrom을 사용하는 것이 좋습니다. 대략적인 방법은 다음과 같습니다..dom{
너비를 직접 정의하세요
위치: 절대;
변환: 이동(-50%, -50%);
왼쪽: 50%;
위쪽: 50%;
}
너비는 알지만
얼마나 강력히 추천하는지 모르겠습니다.
.dom{
너비와 높이를 직접 정의하세요.
위치: 절대;
여백: 자동;
위쪽:0;
오른쪽: 0;
아래쪽:0;
왼쪽: 0;
}
5, flex 레이아웃, 호환성 외에 다른 건 다 괜찮습니다.
으아악
</p>.mask{
으아악
.mask-con{
으아악
6. 호환성을 고려하신다면 ====> 첫 번째 항목을 검토해 주세요. [몇살이시죠? 아직도 IE789를 고려하면 기본 IE7 DOM1 지원이 별로 좋지 않아서요. . . 】
7, 다른 건 없어요. 위의 것만으로도 충분합니다. 좋은거 있으면 추가해주세요
習慣沉默2017-06-26 10:54:35
세 가지 방법이 더 추가되었습니다.
절대 또는 고정 위치 지정을 사용하여 너비와 높이가 알려진 요소를 중앙에 배치합니다.
으아악 display: table 레이아웃 중심 요소를 채택하고 무한한 너비와 높이를 지원하며 IE8+ 및 기타 최신 브라우저와 호환됩니다.
:before 의사 요소는 줄 높이를 확장합니다(모달 구성 요소의 AmazeUI에서 사용하는 방법, 불확실한 너비와 높이 지원, IE8+):
