HTML 요소를 수평 및 수직 중앙에 배치
- 高洛峰원래의
- 2017-02-27 10:43:42999검색
페이지를 디자인할 때 p를 중앙에 배치하고 로그인 창을 중앙에 배치하는 등 페이지 창을 기준으로 가로 및 세로로 표시해야 하는 경우가 많습니다.
지금까지 많은 방법이 모색되었습니다.
HTML:
<body>
<p class="maxbox">
<p class="minbox align-center"></p>
</p>
</body> 렌더링(다음 방법의 렌더링은 동일함):
첫 번째 유형: CSS 절대 위치 지정
은 주로 절대 위치 지정을 사용하며, 그 후 여백을 사용하여 중간 위치로 조정합니다.
상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
가로 세로 가운데 정렬:
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
} 두 번째 유형: CSS 절대 위치 지정 + Javascript/JQuery
절대 위치 지정을 주로 사용하고, Javascript/JQuery를 사용하여 중간 위치로 조정합니다. 첫 번째 방법에 비해 이 방법은 클래스의 유연성을 향상시킵니다.
상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
가로 세로 가운데 정렬:
.align-center{
position: absolute;
left: 50%;
top: 50%;
}JQuery:
$(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});세 번째 방법: CSS3 절대 위치 지정 + 변위
절대 위치 지정과 CSS3 변환: 번역을 사용하면 동일한 효과를 얻을 수도 있습니다.
상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}가로 및 세로 가운데 정렬:
.align-center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /*向左向上位移*/
}네번째 type : Flexbox: [텔레스코픽 레이아웃 상자 모델]
Flexbox 모델에서는 가로, 세로로 요소를 만드는 것이 너무 쉽습니다.
여기에서 HTML을 변경해야 합니다:
<p class="maxbox align-center">
<p class="minbox"></p>
</p>상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
수평 및 수직 중앙 정렬:
.align-center{
display: flex;
display: -webkit-flex; /*兼容问题*/
justify-content: center;
align-items: center;
}
여러 방법 비교:
최초의 CSS 절대 위치 여백 조정, 호환성 좋음 하지만 유연성이 부족합니다. 가로, 세로 가운데 정렬해야 하는 상자가 많은 경우 너비와 높이가 다르기 때문에 .align-center 를 다르게 작성해야 합니다.
두 번째는 스크립팅 언어를 사용하는데, 이는 호환성이 좋고 첫 번째의 단점을 보완합니다. 수평 및 수직 센터링 효과는 너비와 높이의 변화에 영향을 받지 않습니다.
세 번째는 CSS3의 몇 가지 새로운 속성을 사용하며 IE10, Chrome, Firefox 및 Opera와 호환됩니다. 호환성이 그다지 좋지 않으며 가로 및 세로 센터링 효과가 너비와 높이의 변화에 영향을 받지 않습니다.
Firefox, Opera 및 Chrome과 호환되는 Flexbox 모델을 사용하면 IE가 완전히 제거됩니다. 또한 너비와 높이의 변화로 인한 수평 및 수직 센터링 효과에도 영향을 미치지 않습니다.
위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
요소의 수평 및 수직 중앙 정렬에 대한 더 많은 HTML 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!