css의 10가지 상자 수평 수직 가운데 맞추기
12847 단어 # 프런트엔드 면접 문제css
<body>
<div class="wrap allCenter">//
<div class= "item allCenterChild"></div>//
</div>
</body>
첫 번째: 신축성 레이아웃(flex 레이아웃): 부모는 하위 요소를 수직으로 가운데로 하고, 가운데 속성은 부모 요소에만 정의할 수 있다.
<style>
.wrap{//【 】 ： 600px，
width: 600px;
height: 600px;
border: 2px solid purple;
}
.item{//【 】 : 150px，
width：150px;
height:150px;
background: green;
}
//
.allCenter{//
display:flex;// ，display flex
justify-content: center;//
align-items:center;//
}
.allCenterChild{//
}
</style>
두 번째: 하위 요소를 외부 거리로 자동으로 밀어냄
.allCenter{//
display:flex;// ，display flex
}
.allCenterChild{//
margin:auto;// margin:auto auto auto auto;
}
세 번째;
.allCenter{//
display:flex;// ，display flex
}
.allCenterChild{//
align-self:center;// align-items（ ） ， ，
margin：0 auto;//
}
네 번째: 수평 가운데와 수직 가운데의 속성은 하위 요소에 정의되고 부모 요소에 정의되지 않는 Grid 레이아웃
.allCenter{//
display:grid;// grid ，display grid，
}
.allCenterChild{// ，
justify-self：center;// ，
align-self：center;//
}
다섯 번째: 하위 요소의 외곽선 50%에서 상자 높이의 절반을 뺀다(하위 요소 상자 높이는 150px)
.allCenterChild{
margin: calc(50%-75px) auto 0 auto;
}
여섯 번째: 절대적인 포지셔닝으로 서브원소의 상우하좌거리는 모두 같고 상하좌우는 모두 0으로 설정한다. [줄다리기 효과](원소의 넓이가 높으면 미리 설정해야 한다)
.allCenter{//
position:relative;
}
.allCenterChild{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;// ，
margin:auto;// margin
}
일곱 번째: 절대 포지셔닝, 하위 요소는transfrom 속성을 사용하고【원소의 넓이가 높으면 설정할 필요가 없음】
.allCenterChild{
position:absolute;
left:50%;// 50%
right:50%;// 50%
// ，
transfrom:translate(-50%,-50%)// ， 50%， 50%,
}
여덟 번째:table의 특징을 이용하여 표에만 유효하다*하위 요소에 넓은 높이와 수량을 설정하지 않았을 때 주의:table-cell은margin을 감지하지 않고 부모 요소에table-row 등 속성을 설정하면height를 감지하지 못하게 한다.
.allCenter{
display:table-cell;//
vertical-align：middle;// ，
text-align：center；// ， ，， ，text-align ，
}
.allCenterChild{
display： inline-block;// ， text-align ，
}
아홉 번째: 내용이 한 줄만 있을 때 사용할 수 있고, 다른 것은 사용할 수 없다. 문자에 대해 수평 수직으로 가운데 부모 요소:div 하위 요소:줄 안의 문자
<stytle>
.oneline{
width:600px;
height:80px;
background:pink; //
font-size：25px；//
text-align：center；//
line-height：80px；//
}
</stytle>
<div class= "oneline">
content，
</div>
10가지:margin-top과margin-left를 이용하여[원소의 넓이가 높아야 설정]
.allCenterChild{
position:absolute;
top:50%;
margin-top:-10px;
left:50%;
margin-left:-50px;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
v-bind를 사용하여 CSS에 대한 Vue3 상태애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
