CSS 중심 정렬을 설정하는 방법

Css 중앙 정렬 설정 방법: 1. 가로 가운데 맞춤 [text-align:center]; 2. 가로 가운데 맞춤 [margin: 0 auto] 3. 세로 가운데 맞춤 [line-height] 4. 테이블 사용, 가로 및 세로 가운데; 5. 유연한 레이아웃, 수평 및 수직 센터링.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

Css 중심 정렬 설정 방법:

1. text-align:center - 수평 중심

은 텍스트, 그림, 버튼 등과 같은 인라인 요소에만 유효합니다. (디스플레이는 인라인 또는 인라인 블록으로 설정됩니다. 등) 수평 정렬 Centering

2, margin: 0 auto; ——수평 중앙 정렬

수평 중앙 정렬만 가능하며 부동 요소 위치 정렬에는 유효하지 않습니다. height=height, 한 줄의 텍스트에만 유효

4. 테이블 사용 - 가로 및 세로 가운데 맞춤

td/th의 align='center' 및 valign='middle' 두 속성은 가로 및 세로 가운데 맞춤 가능

5. 유연한 레이아웃 - 가로 및 세로 가운데 맞춤

 .father{
           width:500px;
           height:200px;
           background-color::#f98769;
           overflow:hidden;//不可缺少否则margin-top不生效
       }
        .son{
            width: 100px;
            height: 100px;
            margin:50px auto ;
            background-color: #ff0000;
        }

6. display: table-cell - 가로 및 세로 가운데 맞춤

테이블이 아닌 요소의 경우 display:table-cell을 사용하여 테이블로 시뮬레이션할 수 있습니다. cell

.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改变主轴为cross axis
justity-content:center;
}

7. 자식은 아버지와 동일해야 합니다(자식 요소의 너비와 높이가 알려져 있음) - 가로 및 세로 중심 정렬

.father{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
    text-align:center;
 }
 .son{
 display:inline-block;//或是inline
 }

8. 알 수 없는 자식 요소 너비 및 세로 centering

.father{
position:relative;
}
.son{//m、n为子盒子宽、高的一半
position:absolute;
left:50%;
top:50%;
margin-left:-mpx;
margin-top:-npx;

9. 의사 요소 방법 - 수직 센터링

.father {
    position:relative;
}
.son {
    position:absolute;
    top:50%;
    left:50%:
    transform:translate(-50%,-50%) /*单独设置transform:translateY(-50%);*/
}

관련 튜토리얼 추천:

CSS 비디오 튜토리얼

위 내용은 CSS 중심 정렬을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!