CSS로 가로, 세로 중심 레이아웃을 구현하는 방법에 대해 이야기해보겠습니다.-CSS 튜토리얼-php.cn

CSS로 가로, 세로 중심 레이아웃을 구현하는 방법에 대해 이야기해보겠습니다.

青灯夜游

풀어 주다： 2020-08-03 16:59:58

원래의

2023명이 탐색했습니다.

CSS로 가로, 세로 중심 레이아웃을 구현하는 방법에 대해 이야기해보겠습니다.

최근 인터뷰에서 면접관이 CSS의 수평 및 수직 센터링 레이아웃 방법에 대해 질문했는데, 저는 프론트엔드 초보자로서 의심할 바 없이 빠르게 정보를 확인하고 분석했습니다. 구덩이에 빠지지 않도록 당신과 공유했습니다.

먼저 html과 몇 가지 기본 CSS 스타일에 대해 설명하겠습니다. 아래에서는 자세한 내용을 다루지 않겠습니다!
html

<body>
		<div class="div1">
			<div class="box  size">垂直水平居中</div>
		</div>
	</body>

로그인 후 복사

공개 CSS 코드는 다음과 같습니다

<style type="text/css">
			/* 公共样式 */
			.div1{
				width: 300px;
				height: 300px;
				border:1px solid aqua;
				
			}
			.box{
				background: #00FFFF;
			}
			.box.size{
				width:100px;
				height:100px;
			}
</style>

로그인 후 복사

이러한 CSS 스타일은 이후 소개에서 기본으로 포함될 예정이므로 다시 설명하지 않겠습니다!

1. 절대 및 여백 자동(일반적으로 사용됨)

마찬가지로 중심 요소의 너비와 높이를 고정해야 하고, 하위 요소의 너비와 높이를 알아야 합니다
이런 식으로, 각 방향의 거리는 0으로 설정됩니다. 이때 여백을 자동으로 설정하면 모든 방향의 중앙에 놓을 수 있습니다

.div1{
				position: relative;
			}
			.box{
				position: absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				
				margin: auto;
			}

로그인 후 복사

2. 절대값과 여백(음수 값)

간단히 이야기하자면 원칙적으로 절대 위치 지정이 사용되며 절대 위치 지정의 백분율은 상위 요소의 너비와 높이를 기준으로 하므로 이 원칙에 따라 요소를 중앙에 배치할 수 있습니다. 하지만 참고하세요: 절대 위치 지정은 하위 요소의 왼쪽 상단을 기준으로 하지만 하위 요소를 중앙에 표시하려면 이 문제를 해결해야 합니다.
이때 마진의 음수 값을 사용하면 효과를 얻을 수 있습니다. 마진이 음수이면 요소가 반대 방향으로 배치됩니다. 이런 식으로 하위 요소의 마진을 절반으로 설정할 수 있습니다. 하위 요소의 너비와 높이. (PS: 단점은 하위 요소의 너비와 높이를 가져와야 한다는 것입니다.)

.div1{
				position: relative;
			}
			.box{
				top: 50%;
				left: 50%;
				position: absolute;
				margin-top: -50px;
				margin-left: -50px;
			}

로그인 후 복사

3. Absolute 및 calc

도 하위 요소의 너비와 높이를 수정하고 너비를 알아야 합니다. 높이, CSS3에는 계산된 속성이 있습니다.
상단의 백분율은 요소의 왼쪽 상단에서 너비의 절반을 뺀 값을 기준으로 합니다. (PS: calc의 호환성에 따라 다름)

.div1{
			   position: relative;
		   }
		   .box{
			   position: absolute;
			   top: calc(50% - 50px ); 
				/* 减号前后没有空格，该样式不生效*/
			   left: calc(50% - 50px );
		   }

로그인 후 복사

이 코드를 작성할 때 흥미로운 점을 발견했습니다. calc(50% -50px ) 빼기 기호 전후에 공백이 없으면 스타일이 적용되지 않습니다. 공백을 쓰면 정상적으로 적용됩니다. 구체적인 이유는 모르겠습니다.mmmm

다음 방법이 적용됩니다. 하위 요소의 너비와 높이를 알 필요는 없습니다.

<body>
		<div class="div1">
			<div class="box">水平垂直居中，不需要子元素固定宽高</div>
		</div>
	</body>

로그인 후 복사

공개 CSS는 다음과 같습니다

	.div1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			.box{
				background: #00FFFF;
			}

로그인 후 복사

Four.

flex는 몇 줄의 코드만으로 센터링 효과를 얻을 수 있는 현대적인 레이아웃 구성표입니다

.div1{
				display: flex;
				justify-content: center;
				align-items: center;
			}

로그인 후 복사

5 Line-height

인라인 요소의 센터링 속성을 사용하면 수평을 달성할 수도 있습니다. 수직 센터링. 상자를 인라인 요소로 설정하고 텍스트 정렬을 사용하여 수평 중심 또는 수직 정렬을 달성합니다. (PS: 이 방법을 사용하려면 하위 요소에서 텍스트 표시를 원하는 효과로 재설정해야 합니다.)

          .div1{
				line-height: 300px;
				text-align: center;
				font-size: 0px;
			}
			.box{
				font-size: 10px;
				display: inline-block;
				vertical-align: middle;
				line-height:initial;
				/* 修正文字 */
			 	text-align: left;
	        }

로그인 후 복사

6 절대 및 변환

하위 요소의 고정 너비와 높이가 필요하지 않지만,translate2d

           .div1{
				position: relative;
			}
			.box{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}

로그인 후 복사

7의 호환성에 의존합니다. css-table

css의 새로운 테이블 속성을 사용하면 일반 요소의 표시 효과를 변경할 수 있습니다. 테이블 요소에도 수평 중앙 정렬이 가능합니다

           .div1{
				display:table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.box{
				display:inline-block;
			}

로그인 후 복사

위는 제가 요약한 중앙 정렬 방법 중 일부입니다. 다른 추가 사항이 있으면 환영합니다!

개인적인 느낌:

저는

absolute +margin auto, flex, Absolute, Transform을 선호합니다. 모바일 단말기에서는 flex를 사용하는 것이 가장 좋습니다. PC 단말기에서는 절대 +margin auto를 좋아합니다추천 관련 튜토리얼: CSS 비디오 튜토리얼

CSS3 비디오 튜토리얼

위 내용은 CSS로 가로, 세로 중심 레이아웃을 구현하는 방법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!