수집할 가치가 있는 CSS를 사용하여 수평 및 수직 센터링을 달성하는 10가지 방법 요약

이 글은 수집할 가치가 있는 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实现div水平垂直居中的五种方法

css 实现DIV水平垂直居中于屏幕

위 내용은 수집할 가치가 있는 CSS를 사용하여 수평 및 수직 센터링을 달성하는 10가지 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!