6가지 CSS 수평 및 수직 센터링 솔루션

이 글에서는 CSS 수평 및 수직 센터링 솔루션(6종)에 대한 관련 정보를 주로 소개합니다. 편집자가 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

준비

요소 만들기

<p class="parent">
  <p class="child">child</p>
</p>

세로 및 가로 가운데 맞춤 해결 방법 1: 너비를 알 때 절대+여백 음수 값

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  background: yellow;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
}

세로 및 가로 가운데 맞춤 해결 방법 2: 너비와 높이를 알 수 없을 때 절대+변형

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

세로 센터링 옵션 3: position+margin:auto

.parent {
  position:relative;
  width:200px;
  height:200px;
  background: red;
}
.child {
  width:80px;
  height:40px;
  background: yellow;
  position: absolute;
  left:0;
  top:0;
  right:0 ;
  bottom:0;
  margin:auto;
}

세로 센터링 옵션 4: + 여러 줄 텍스트의 세로 센터링: table-cell+vertical-align:middle;

.parent {
    height: 300px;
    width:400px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
  display: inline-block;
  width:50px;
  height:50px;
  background: blue;
}
/* 或者 */
.parent {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
    text-align: center;
}
.child {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

세로 센터링 옵션 5: 표시: flex

.parent {
  width:400px;
  height:200px;
  background:red;
  display: flex;
  justify-content:center;
  align-items:center;
}
.child {
  height:100px;
  width:100px;
  background:green;
}

수직 센터링 솔루션 6: 의사 요소

.parent {
  width:200px;
  height:200px;
  background:red;
  text-align: center;
}
.child {
  height:100px;
  width:100px;
  background:yellow;
  display: inline-block;
  vertical-align: middle;
}
.parent:before {
  content:"";
  height:100%;
  vertical-align: middle;
  display: inline-block;
}

관련 권장 사항:

CSS에서 수평 및 수직 센터링을 달성하는 4가지 방법

HTML 요소의 수평 및 수직 센터링을 설정하는 방법

방법 CSS와 두 개의 최종 정렬 코드 공유에서 수평 및 수직 센터링을 달성하기

위 내용은 6가지 CSS 수평 및 수직 센터링 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!