이 글의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
