简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

요소의 크기를 알 수 없는 경우 CSS에서 수직 및 수평 센터링을 달성하는 방법(코드)

不言
풀어 주다： 2018-08-09 17:11:47
원래의
2584명이 탐색했습니다.

이 글의 내용은 CSS에서 크기를 알 수 없는 요소의 수직 및 수평 중앙 정렬(코드)을 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

아이디어: 하위 요소를 위에서 50%, 왼쪽에서 50%로 절대적으로 배치한 다음 CSS3 변환을 사용합니다:translate(-50%; -50%)
장점: 고급, 웹킷에서 사용할 수 있습니다. 기반 브라우저
단점 : IE9 이하에서는 변환 속성이 ​​지원되지 않습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<p class="parent3">
        <p class="child">hello world-3</p>
    </p>
</body>
</html>
로그인 후 복사

관련 권장 사항:

CSS 선택자에 대한 코드 예제 및 CSS 우선 순위에 대한 코드 예제

페이지에 단어가 너무 많은 경우, 방법 CSS를 사용하여 초과 부분을 타원으로 표시하시겠습니까? (단일/다줄 코드 데모)

위 내용은 요소의 크기를 알 수 없는 경우 CSS에서 수직 및 수평 센터링을 달성하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
垂直水平居中
원천：php.cn
이전 기사：CSS 선택기의 코드 예제 및 CSS 우선순위의 코드 예제 다음 기사：CSS로 레이아웃을 구현할 때 사용할 수 있는 몇 가지 기술(코드)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
제목 변경: 수직형 제품 디스플레이 내 웹페이지에는 현재 프로젝트 제품이 세로로 한 줄씩 나열되어 있습니다. 스크롤 가능한 방식으로 세로로 표시하고 싶습니다. 가로로 어떻게 바꾸나요? divclas...
에서 2024-04-05 09:17:50
0
1
3505
수직으로 회전된 표 제목, 중앙 + 하단 정렬, 브라우저 간 Chrome에서는 예상대로 보이지만 Firefox에서는 그렇지 않은 회전된 헤더가 있는 테이블이 있습니다. Chromev108(수직 하단, 수평 중간) ✅Fire...
에서 2024-04-04 16:45:25
0
1
330
재작성된 제목: 크기를 조정할 때 고정 HTML 정사각형 또는 원 요소를 가로 및 세로 중앙에 배치 다양한 크기의 정사각형 또는 원형 고정 HTML 요소를 가로 및 세로로 중앙에 배치하는 방법은 무엇입니까? 너비와 높이가 동일하게 유지되어야 한다는 사실 때문에 ...
에서 2024-04-04 12:31:51
0
1
322
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！