화면에서 div를 가로 및 세로 중앙에 배치하는 방법-HTML 튜토리얼-php.cn

화면에서 div를 가로 및 세로 중앙에 배치하는 방법

醉折花枝作酒筹

풀어 주다： 2021-04-25 18:25:24

앞으로

5103명이 탐색했습니다.

이 글에서는 div를 화면의 가로 및 세로 중앙에 배치하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

최근 웹 페이지 작성 시 p를 화면 중앙에 배치해야 하는 경우가 많아 비교적 간단한 몇 가지 일반적인 방법을 기록해 두었습니다.
<center></center> 태그를 추가하여 가로로 가운데에 놓거나 margin:auto;를 설정하면 됩니다. 물론 다음 두 가지 방법을 사용할 수도 있습니다. 방법은 아래에 언급되어 있습니다: (가로 중심 + 세로 중심) 방법 <center></center>标签即可，或者设置margin:auto;当然也可以用下面的方法

下面说两种在屏幕正中（水平居中+垂直居中）的方法
放上示范的html代码：

<body>
	<p class="main">
		<h1>MAIN</h1>
	</p>
</body>

로그인 후 복사

方法一：

p使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。

.main{
	text-align: center; /*让p内部文字居中*/
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

로그인 후 복사

效果如图：

方法二：
仍然是绝对布局，让left和top都是50%，这在水平方向上让p的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

 .main{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

로그인 후 복사

方法三：
对于水平居中，可以使用最简单的<center>标签，不过已经过时了，用法如下：

<p><center>123</center></p>

로그인 후 복사

这个<center>标签就是相对于 데모 HTML 코드 삽입:

<p style="text-align:center;">123</p>

로그인 후 복사

방법 1:

p 절대 레이아웃을 사용하고 여백 설정 :auto; 그리고 위쪽, 왼쪽, 오른쪽, 아래쪽 값을 모두 0이 아닌 동일로 설정합니다.

rrreee효과는 그림과 같습니다:

방법 2: 여전히 절대 레이아웃이므로 왼쪽과 위쪽을 모두 50%로 하여 p의 가장 왼쪽 부분과 화면의 가장 왼쪽 부분을 가로 방향으로 50% 간격으로 만듭니다. , 수직 방향에서도 동일하므로 다시 변환을 사용하여 자체 너비(높이)의 50%를 왼쪽(상단)으로 변환하여 중앙 효과를 얻습니다. 효과는 위와 동일합니다.

rrreee

방법 3: 🎜 수평 중앙 정렬의 경우 가장 간단한 <center></center> 태그를 사용할 수 있지만 사용법은 다음과 같습니다. 다음:

rrreee🎜이 <center></center> 태그는 중앙에 배치될 수 있는  태그의 텍스트를 기준으로 합니다. 🎜🎜center 태그는 오래되었기 때문에 공식적인 방식으로 사용하는 것은 권장하지 않습니다. 대신 다음 방법을 사용할 수 있습니다. 🎜rrreee🎜추천 학습: 🎜html 동영상 튜토리얼🎜🎜

위 내용은 화면에서 div를 가로 및 세로 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!