CSS의 수직 및 수평 센터링 구현 방법 요약(코드 포함)

이 글은 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. 이미지 파일도 지원됩니다.

1. 콘텐츠의 높이를 정의해야 합니다. . 콘텐츠의 텍스트 높이가 외부 컨테이너를 초과하는 경우 오버플로를 방지하기 위해 속성을 늘려야 합니다.

two

, 음수 여백

이것은 요소의 높이와 시기에서 현재 가장 일반적으로 사용되는 방법일 수 있습니다. 너비는 고정 값이고, 문서 흐름에서 벗어나도록 요소를 상대 레이아웃으로 설정하고, 위쪽: 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.

2. 콘텐츠의 텍스트 높이가 외부 컨테이너를 초과하는 경우 오버플로를 방지하기 위해 오버플로 속성을 추가해야 합니다.

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 접두사가 필요합니다. 요소가 변형 속성을 사용하는 경우 다른 변형 효과에 영향을 미칠 수 있습니다.

4. 특히 변형 스타일: 보존-3d 속성을 사용할 때 브라우저 렌더링 문제인 가장자리가 흐려질 수 있습니다. . Table-Cell 사용

이것은 최고의 수직 센터링 솔루션일 수 있지만 가장 큰 문제가 있습니다. 수직 센터링 효과를 완성하려면 추가 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;使子元素水平方向居中；

5.3 优缺点：

优：

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!