CSS의 다양한 센터링 방법에 대해 토론

오늘은 CSS의 다양한 센터링 방법에 대해 주로 이야기하겠습니다.
첫 번째는 가로로 가운데에 두는 것입니다. 물론 가장 간단한 방법은

margin:0 auto;

즉, margin-left 및 margin-right 속성을 auto로 설정하는 것입니다. 수평성을 달성하기 위해 센터링 효과를 얻습니다.

다른 방법은 어떤가요? 하나씩 살펴보겠습니다.

line-height

먼저 텍스트의 가로 가운데 정렬 방법을 소개합니다.

<div class="wrap">刘放</div>

줄 높이를 사용하여 높이로 설정하세요.

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
  
    height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

효과는 다음과 같습니다.

패딩 채우기

패딩과 배경 사용 -clip을 사용하여 div 수직 센터링 수준 달성:

<div class="parent">
  <div class="children"></div>
</div>

backgroun-clip을 콘텐츠 상자로 설정하고 배경을 콘텐츠 영역의 바깥쪽 가장자리까지 자른 다음 패딩을 사용하여 절반으로 설정합니다. 외부 div에서 내부 div를 뺀 차이:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

효과는 다음과 같습니다.

여백 채우기

다음 , 수평 및 수직 센터링을 달성하기 위해 여백 채우기 방법을 소개합니다.
먼저 상위-하위 div를 정의합니다.

< ;/ div>

여기서 하위 div의 margin-top을 상위 div 높이에서 하위 div 높이의 절반을 뺀 값으로 설정한 다음 오버플로를 숨김으로 설정하여 BFC를 트리거합니다. parent div. LESS 코드는 다음과 같습니다.

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

최종 센터링 효과는 다음과 같습니다.

절대 위치 지정

position:absolute를 위쪽, 왼쪽 50%로 사용하고 여백을 음수 값으로 설정하면 div를 가로 및 세로로 가운데에 배치할 수도 있습니다. 먼저 상위-하위 div를 정의해야 합니다.

<div class="parent">
  <div class="children"></div>
</div>

그런 다음 해당 CSS를 여백에 설정합니다.

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

값은 div 너비의 절반입니다. 최종 렌더링은

입니다. text-align centered

우리 모두 알고 있듯이 text-align은 div의 내용을 가로 가운데로 만들 수 있습니다. 하지만 이 div의 중앙에 하위 div를 배치하려면 어떻게 해야 할까요? 하위 div의 표시를 인라인 블록으로 설정할 수 있습니다.

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

그림 중앙 정렬

일반적인 그림 중앙 정렬은 그림을 div로 감싸고 div의 텍스트 정렬을 중앙으로 설정하는 것과 같습니다.
다음 링크를 참조할 수 있습니다:
개인 사이트

상위 컨테이너가 높이와 너비를 얻을 수 있도록 이미지를 자리 표시자로 사용하여 다음을 허용하는 특별한 방법이 있습니다. 50% 오프셋 이미지에는 백분율 계산을 위한 참조 컨테이너가 있을 수 있습니다. 장점은 이미지의 크기를 알 수 없으며 상위 컨테이너의 크기를 초과하지 않는 이미지를 배치할 수 있으며 중앙에 배치된다는 것입니다. 게다가 호환성도 좋고, IE6도 원활하게 호환됩니다. 코드는 다음과 같습니다.

<div class="parent">
  <p>
    <img class="hidden-img lazy"  src="/static/imghwm/default1.png"  data-src="http://nec.netease.com/img/s/1.jpg"    alt="" />
    <img class="show-img lazy"  src="/static/imghwm/default1.png"  data-src="http://nec.netease.com/img/s/1.jpg"    alt="" /></p>
</div>

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

효과는 다음과 같습니다.

중심 변환

예제에서는 위에서 언급한 div 센터링의 경우 div의 너비는 고정되어 있습니다. 그러나 실제 프로젝트에서는 특히 반응형 디자인이나 모바일 디자인에서 더 일반적인 가변 너비의 div를 접할 수 있습니다. 고정 너비가 필요하지 않은 div를 가로 및 세로로 중앙에 배치하는 방법은 다음과 같습니다.
첫 번째 코드:

<div class="parent">
  <div class="children">
    <div class="children-inline">我是水平垂直居中噢！</div>
  </div>
</div>

.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}

효과는 다음과 같습니다.

먼저 float를 사용하여 상위 div를 변경합니다. 즉, 자식의 너비가 줄어들고 left:50%는 자식의 왼쪽을 가로 중심선에 정렬합니다. 이때는 아직 중앙에 위치하지 않았으므로 수평 중앙에 위치하도록 children-inner를 왼쪽으로 -50% 이동시켜야 합니다.
세로 방향에 대해 이야기해 보겠습니다. 먼저 어린이의 상단을 50%로 설정한 다음 상단 가장자리를 수직 중심선에 맞춰 정렬합니다. 마찬가지로 어린이 내부도 -50% 위로 이동해야 합니다. 하지만 이 50%는 계산할 수 없으므로 변환을 사용합니다:translate3d(0, -50%, 0)
이 방법은 사용하기 매우 쉽습니다.

flex centering

마지막으로 CSS3의 display:flex로 구현한 가로, 세로 센터링 방식을 소개하겠습니다.

<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢！</div>
</div>

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

효과는 다음과 같습니다.

이 방법은 가장 간단하지만 호환성이 좋지 않습니다. 가면 갈수록 다양한 주요 브라우저가 모두 호환될 것입니다.

위 내용은 CSS의 다양한 센터링 방법에 대한 전체 설명입니다.