수집할 가치가 있는 CSS를 사용하여 수평 및 수직 센터링을 달성하는 10가지 방법 요약
- 不言원래의
- 2018-09-14 14:20:542118검색
이 글은 수집할 가치가 있는 CSS에서 수평 및 수직 중앙 정렬을 구현하는 10가지 방법을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
핵심 사항을 표시하세요. 이것은 필수 면접 질문입니다. 많은 면접관들이 이 질문을 좋아합니다. 저는 여러 번 질문을 받았습니다
위 그림의 효과를 얻는 것은 매우 간단해 보입니다. , 하지만 사실 숨겨진 비밀이 있습니다. 이 글에서는 CSS에서 수평 및 수직 센터링을 구현하는 방법을 다음과 같이 요약합니다. 이 글에서는 이를 하나씩 소개합니다
센터링 요소의 고정된 너비와 높이만 적용 가능합니다
절대 + 음수 여백
절대 + 여백 auto
-
절대 + 계산
중앙에 있는 요소의 너비와 높이가 다양합니다.
절대 + 변형
lineheight
-
쓰기 모드 ㅋㅋㅋ . HTML 코드는 총 2개의 요소가 있습니다.
<div> <div>123123</div> </div>
wp는 상위 요소의 클래스 이름이고, box는 고정 요소의 클래스 이름입니다. 너비 및 가변 너비, 크기는 지정된 너비를 나타내는 데 사용되며 다음은 모든 효과에 사용되는 공통 코드이며 주로 색상과 너비 및 높이를 설정합니다 - 참고: 이 공통 코드는 나중에 반복하지 않지만 단지 해당 프롬프트 제공
-
/* 公共代码 */ .wp { border: 1px solid red; width: 300px; height: 300px; } .box { background: green; } .box.size{ width: 100px; height: 100px; } /* 公共代码 */절대 위치 지정 비율은 상위 요소의 너비와 높이를 기준으로 합니다. 이 기능을 통해 하위 요소는 중앙에 표시될 수 있지만 절대 위치 지정은 하위 요소를 기준으로 합니다. 왼쪽 상단 모서리에 원하는 효과는 하위 요소의 중심이 표시되는 것입니다.
이 문제를 해결하려면 음수 여백을 지정하여 요소를 반대 방향으로 배치할 수 있습니다. 자식 요소의 여백은 너비의 절반입니다. CSS 코드는 다음과 같습니다. -
/* 此处引用上面的公共代码 */ /* 此处引用上面的公共代码 */ /* 定位代码 */ .wp { position: relative; } .box { position: absolute;; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }이 방법은 이해하기 쉽고 좋습니다. 호환성 단점은 하위 요소의 너비와 높이를 알아야 한다는 것입니다.
전체 데모를 보려면 클릭하세요 절대 + 여백 자동
이 방법에서는 중앙에 있는 요소의 너비와 높이도 일치해야 합니다. HTML 코드는 다음과 같습니다
<div> <div>123123</div> </div>
이 방법에서는 각 방향의 거리를 0으로 설정하는데, 이는 이번 시간에 다루겠습니다. 여백을 자동으로 설정하면 모든 방향의 중심을 맞출 수 있습니다
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
이 방법은 단점은 하위 요소의 너비와 높이를 알아야 한다는 것입니다.
전체 DEMO를 보려면 클릭하세요
absolute + calc이 방법은 또한 중심 요소의 너비와 높이도 필요합니다. 요소는 고정되어야 하므로 상자에 크기 클래스를 추가합니다. HTML 코드는 다음과 같습니다
<div> <div>123123</div> </div>
계산된 속성을 가져온 CSS3에 감사드립니다. 상단의 백분율은 요소의 왼쪽 상단을 기준으로 하기 때문에 절반은 됩니다. 코드는 다음과 같습니다
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
이 방법의 호환성은 calc의 호환성에 따라 달라집니다. 단점은 하위 요소의 너비와 높이를 알아야 한다는 것입니다
클릭하여 보기를 클릭하세요. DEMO
절대 + 변환
또는 절대 위치 지정이 완료되었지만 이 방법은 하위 요소의 너비와 높이가 고정되어야 하므로 크기 클래스가 더 이상 필요하지 않습니다. HTML 코드는 다음과 같습니다
<div> <div>123123</div> </div>
수정하려면 절대 위치 지정 문제가 있는 경우 CSS3의 새 변환을 사용할 수도 있습니다. 변환의 변환 속성은 너비와 높이를 기준으로 백분율로 설정할 수도 있으므로 변환을 -50%로 설정할 수도 있습니다. 코드는 다음과 같습니다
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
이 방법의 호환성은 Translate2d의 호환성에 따라 다릅니다.
전체 DEMO를 보려면 클릭하세요
lineheight
인라인 사용 요소 센터링 속성을 사용하여 가로 및 세로로 가운데 맞춤할 수도 있습니다. .HTML 코드는 다음과 같습니다
<div> <div>123123</div> </div>
상자를 인라인 요소로 설정하고 text-align을 사용하여 수평 중앙 정렬을 구현합니다. 그러나 많은 학생들은 vertical-align는 세로 방향으로 중앙에 위치할 수도 있습니다. 코드는 다음과 같습니다
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left; /* 修正文字 */
}
이 방법을 사용하려면 하위 요소에서 텍스트 표시를 원하는 효과로 재설정해야 합니다.
전체 데모를 보려면 클릭하세요
쓰기 모드
많은 학생들이 저처럼 writing-mode 속성을 모르고 있을 것입니다. 간단히 말해서, 쓰기 모드는 텍스트의 표시 방향을 변경할 수 있습니다. 쓰기 모드를 사용하면 텍스트 표시가 세로 방향으로 변경됩니다
<div>水平方向</div> <div>垂直方向</div>
.div2 {
writing-mode: vertical-lr;
}
표시 효과는 다음과 같습니다.
水平方向 垂 直 方 向
더 놀라운 점은 모든 수평 CSS 속성이 text-align과 같은 수직 속성이 된다는 것입니다. 에서는 writing-mode와 text-align을 통해 수평 및 수직 중앙 정렬을 구현할 수 있지만, 이런 방식으로 구현하는 것은 조금 더 번거로울 뿐입니다
<div> <div> <div>123123</div> </div> </div>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
writing-mode: vertical-lr;
text-align: center;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box {
display: inline-block;
margin: auto;
text-align: left;
}
이해하고 이해하기가 조금 복잡합니다
전체 DEMO를 보려면 클릭하세요
table
테이블은 페이지 레이아웃에 사용되었지만 더 이상 아무도 이 작업을 수행하지 않지만 테이블도 가로 및 세로 가운데 맞춤을 달성할 수 있지만 중복 코드를 많이 추가하세요
|
123123
|
테이블 셀의 내용이 자연스럽게 수직 중앙에 배치됩니다. 그냥 가로 중앙 정렬 속성만 추가하세요. text-align就可以做到水平居中，但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中，代码如下
.wp {
text-align: center;
}
.box {
display: inline-block;
}
这种方法需要在子元素中将文字显示重置为想要的效果
点击查看完整DEMO
writing-mode
很多同学一定和我一样不知道writing-mode属性，感谢@张鑫旭老师的反馈，简单来说writing-mode可以改变文字的显示方向，比如可以通过writing-mode让文字的显示变为垂直方向
<div> <div>123123</div> </div>
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
显示效果如下：
<div> <div>123123</div> </div>
更神奇的是所有水平方向上的css属性，都会变为垂直方向上的属性，比如text-align，通过writing-mode和text-align
.wp {
display: flex;
justify-content: center;
align-items: center;
}이 방법은 코드가 너무 중복되어 테이블의 올바른 사용법이 아닙니다
点击查看完整DEMO
css-table
css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中
<div> <div>123123</div> </div>
下面通过css属性，可以让p显示的和table一样
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错
点击查看完整DEMO
flex
flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中
<div> <div>123123</div> </div>
.wp {
display: flex;
justify-content: center;
align-items: center;
}
目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况
点击查看完整DEMO
grid
感谢@一丝姐 反馈的这个方案，css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中
<div> <div>123123</div> </div>
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
代码量也很少，但兼容性不如flex，不推荐使用
点击查看完整DEMO
总结
下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下
PC端有兼容性要求，宽高固定，推荐absolute + 负margin
PC端有兼容要求，宽高不固定，推荐css-table
PC端无兼容性要求，推荐flex
移动端推荐使用flex
小贴士：
| 方法 | 居中元素定宽高固定 | PC兼容性 | 移动端兼容性 |
|---|---|---|---|
| absolute + 负margin | 是 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ |
| absolute + margin auto | 是 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ |
| absolute + calc | 是 | ie9+, chrome19+, firefox4+ | 安卓4.4+, iOS6+ |
| absolute + transform | 否 | ie9+, chrome4+, firefox3.5+ | 安卓3+, iOS6+ |
| writing-mode | 否 | ie6+, chrome4+, firefox3.5+ | 安卓2.3+, iOS5.1+ |
| lineheight | 否 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ |
| table | 否 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ |
| css-table | 否 | ie8+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ |
| flex | 否 | ie10+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ |
| grid | 否 | ie10+, chrome57+, firefox52+ | 安卓6+, iOS10.3+ |
最近发现很多同学都对css不够重视，这其实是不正确的，比如下面的这么简单的问题都有那么多同学不会，我也是很无语
<div>123</div> <div>123</div>
.red {
color: red
}
.blue {
color: blue
}
相关推荐：
위 내용은 수집할 가치가 있는 CSS를 사용하여 수평 및 수직 센터링을 달성하는 10가지 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!