화면에서 div를 가로 및 세로 중앙에 배치하는 방법
- 醉折花枝作酒筹앞으로
- 2021-04-25 18:25:245084검색
이 글에서는 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></center>标签，不过已经过时了，用法如下：
<p><center>123</center></p>
这个<center></center>标签就是相对于<p></p> 데모 HTML 코드 삽입:
<p style="text-align:center;">123</p>
- 방법 1:
p 절대 레이아웃을 사용하고 여백 설정 :auto; 그리고 위쪽, 왼쪽, 오른쪽, 아래쪽 값을 모두 0이 아닌 동일로 설정합니다.
- 방법 2: 여전히 절대 레이아웃이므로 왼쪽과 위쪽을 모두 50%로 하여 p의 가장 왼쪽 부분과 화면의 가장 왼쪽 부분을 가로 방향으로 50% 간격으로 만듭니다. , 수직 방향에서도 동일하므로 다시 변환을 사용하여 자체 너비(높이)의 50%를 왼쪽(상단)으로 변환하여 중앙 효과를 얻습니다. 효과는 위와 동일합니다.
- 방법 3: 🎜 수평 중앙 정렬의 경우 가장 간단한
<center></center>태그를 사용할 수 있지만 사용법은 다음과 같습니다. 다음:
<center></center> 태그는 중앙에 배치될 수 있는 <p></p> 태그의 텍스트를 기준으로 합니다. 🎜🎜center 태그는 오래되었기 때문에 공식적인 방식으로 사용하는 것은 권장하지 않습니다. 대신 다음 방법을 사용할 수 있습니다. 🎜rrreee🎜추천 학습: 🎜html 동영상 튜토리얼🎜🎜위 내용은 화면에서 div를 가로 및 세로 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：HTML에서 링크를 빠르게 찾는 방법다음 기사：HTML에서 링크를 빠르게 찾는 방법