CSS로 가로, 세로 중심 레이아웃을 구현하는 방법에 대해 이야기해보겠습니다.
- 青灯夜游원래의
- 2020-08-03 16:59:582000검색
최근 인터뷰에서 면접관이 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-tablecss의 새로운 테이블 속성을 사용하면 일반 요소의 표시 효과를 변경할 수 있습니다. 테이블 요소에도 수평 중앙 정렬이 가능합니다
.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 비디오 튜토리얼
,위 내용은 CSS로 가로, 세로 중심 레이아웃을 구현하는 방법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!