이 글은 CSS의 수직 및 수평 센터링 구현 방법을 요약한 것입니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
최근 저는 다음과 같은 인터뷰 질문을 많이 보았습니다. CSS를 사용하여 수직 및 수평 센터링을 달성하는 몇 가지 방법을 알려주십시오. CSS의 기초를 읽다가 완전 센터링에 대해 이야기하는 기사를 봤습니다. 기사 내용을 요약하면 다음과 같습니다.
1. 절대(Absolute Centering) 사용
1.1 구체적인 코드는 다음과 같습니다.
.container {
position: relative;
}
.absolute_center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
padding: 20px;
overflow: auto;
}<div> <div> <ul> <li> 该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性 </li> </ul> </div> </div>
1.2 이 방법의 핵심 아이디어는 다음과 같습니다.
위치 지정 및 레이아웃에 절대값을 사용하고, 블록 요소의 일반적인 유동적 특성에서 벗어나 블록 요소의 유동적 특성을 사용합니다. 절대 수직 및 수평 센터링을 완료합니다.
다음은 알아야 할 두 가지 기본 지식입니다.
1. 유체 특성:
div 요소와 같은 블록형 수평 요소는 기본적으로 자동으로 수평 방향을 채웁니다(비부동, 절대 위치 지정, 등) 전체 외부 컨테이너, 왼쪽 여백/오른쪽 여백, 왼쪽 여백/오른쪽 여백, 테두리 왼쪽 너비/테두리 오른쪽 너비 등이 있는 경우 실제 콘텐츠 영역은 축소에 반응합니다.
2.절대 유체 특성 :
기본적으로 유체 특성을 갖지 않고 특정 조건에서만 가능하며 이 조건은 "반대 방향의 위치 지정이 동시에 발생하는 경우", 즉 왼쪽과 오른쪽이 수평 방향, 상하 방향이 수직 방향으로 위치하게 되면 서로 반대 방향이 동시에 포지셔닝 값을 가지게 되면 절대적인 유체 특성이 발생하게 됩니다.
1.3 장점 및 단점:
장점:
1. 우수한 호환성, 완벽한 유동 특성은 모든 최신 브라우저와 호환됩니다.
2. . 콘텐츠 너비 및 높이 쓰기 방법은
4. 이미지 파일도 지원됩니다.
, 음수 여백
이것은 요소의 높이와 시기에서 현재 가장 일반적으로 사용되는 방법일 수 있습니다. 너비는 고정 값이고, 문서 흐름에서 벗어나도록 요소를 상대 레이아웃으로 설정하고, 위쪽: 50%, 왼쪽: 50%;를 설정하고, margin-left 및 margin-top을 사용하여 요소를 완전히 중앙에 배치합니다.
2.1 구체적인 코드는 다음과 같습니다..container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Negative {
position: absolute;
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -120px;
background-color: cornsilk;
}<div> <div> </div> </div>
2.2 이 방법의 핵심 아이디어는 다음과 같습니다.
여기에 참고 사항이 있습니다:
box-sizing:border-box 속성을 사용할 때 오프셋은 테두리와 패딩을 계산할 필요가 없습니다.
2.3 장점 및 단점:
장점: 1. IE6-IE7을 포함한 우수한 호환성
2. 추가 마크업 HTML 요소가 없고 코드가 적습니다. 단점:
1.
3. box 기본 콘텐츠 상자 오프셋을 사용하는 것과 다르며 다시 계산해야 합니다.
3. 변환 사용
3.1 구체적인 코드는 다음과 같습니다.
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: darkseagreen;
}<div> <div> <ul> <li> 该方法的核心思想是使用相对布局，并使用top以及left使内容置于容器中心部位，再使用translate来控制偏移量 </li> </ul> </div> </div>
3.2 이 방법의 아이디어는 다음과 같습니다.
상대 레이아웃을 사용하고 위쪽과 왼쪽을 사용하여 콘텐츠를 컨테이너 중앙에 배치한 다음 변환을 사용하여 오프셋을 제어합니다.
3.3 장점과 단점:
장점: 1. 콘텐츠의 너비와 높이는 조정 가능하며, 콘텐츠의 너비와 높이는 지정할 필요가 없습니다.
. 단점:
1. 호환성이 좋지 않습니다. 변환은 IE8과 호환되지 않으므로 IE9 이상의 최신 브라우저만 지원합니다.
2. 다양한 브라우저와 호환하려면 몇 가지 추가 CSS 접두사가 필요합니다. 요소가 변형 속성을 사용하는 경우 다른 변형 효과에 영향을 미칠 수 있습니다.
이것은 최고의 수직 센터링 솔루션일 수 있지만 가장 큰 문제가 있습니다. 수직 센터링 효과를 완성하려면 추가 html 요소가 필요합니다.
4.1 구체적인 코드는 다음과 같습니다.
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Table {
display: table;
}
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: deepskyblue;
}<div> <div> <div> 使用table-cell完成垂直水平居中 </div> </div> </div>
@import "./absolute_center4.png"{width="50%"}
4.2 该方法的核心思想是：
使用表格来实现垂直居中，再使用margin: 0 auto;来实现水平居中。
具体操作步骤如下：
1.设置父元素为块级表格；
2.设置子元素为表格单元格；
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中；
4.设置子元素中的内容的宽度，添加margin: 0 auto;属性，使子元素水平居中。
4.3 优缺点：
优点：
1.内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE8；
缺点：
1.完成一个垂直居中效果，需要3个html元素；
五、使用Inline-block
这也是一种常用的垂直水平居中的方法，但会存在一个问题：当内容的宽度大于容器宽度-0.25em的时候，会发生内容上移到顶部的方法，所以需要一些小的技巧来避免这样的问题。
5.1 具体代码如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Inline {
text-align: center;
overflow: auto;
}
.container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
background-color: greenyellow;
padding: 20px;
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}<div> <div> 使用inline-block完成水平垂直居中 </div> </div>
5.2 该方法的核心思想是：
和table有点类似，设置内容为inline-block块，设置vertical-align: middle;属性使元素垂直方向居中，再父容器设置text-align:center;使子元素水平方向居中；
优：
1、内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE7；
缺：
1.依赖margin-left：-0.25em来矫正水平方向居中的误差；
2.内容的宽度必须小于容器的宽度减去0.25em。
六、使用Flexbox
弹性布局是当前移动端比较流行的布局方式，它可以很优雅的完成垂直水平居中效果。
6.1 具体代码如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.center_block {
background-color: wheat;
padding: 20px;
}<div> <div> 使用flexbox完成水平垂直居中 </div> </div>
6.2 该方法的核心思想是：
使用弹性布局，align-items: center;使元素在侧轴方向居中（默认是垂直方向），justify-content: center;使元素在主轴方向居中（默认是水平方向）;
6.3 优缺点：
优：
1.内容宽度、高度自适应,即便文本溢出也很优雅；
2.可以使用很多弹性布局的新特性；
缺：
1.兼容性比较差，目前只有IE10以上兼容；
2.需要写额外的兼容性前缀；
3.各个浏览器的表现可能会有一些差异；
위 내용은 CSS의 수직 및 수평 센터링 구현 방법 요약(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
