CSS에서 가운데 ​​정렬을 설정하는 방법

CSS에서 가운데 ​​정렬을 설정하는 방법: 1. "text-align:center" 또는 "margin:vertical auto;"를 통해 가로 가운데 맞춤 2. "line-height"를 통해 세로 가운데 맞춤 3. "탄력적 레이아웃"을 통해 달성 수평 및 수직 센터링 등등.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

css - 중앙 정렬 방법

• text-align:center - 수평 중앙 정렬

은 텍스트, 그림, 버튼과 같은 인라인 요소에만 유효합니다(디스플레이는 인라인 또는 inline -block 등) 수평 센터링

• margin: 수직 자동; —— 수평 센터링

수평 센터링만 가능하며 부동 요소 위치 지정에는 유효하지 않습니다.

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

• line-height —— 수직 센터링

line-height=height, 한 줄의 텍스트에만 유효

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

td/th의 align='center' 및 valign='middle' 속성은 가능 수평 및 수직 중앙 정렬

• 유연한 레이아웃 - 수평 및 수직 중앙 정렬

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

• 디스플레이 사용: table-cell - 수평 및 수직 중앙 정렬

테이블이 아닌 요소의 경우 디스플레이를 사용할 수 있습니다. :table-cell 테이블 셀로 시뮬레이션해 봅시다

.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 }

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

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

• 알 수 없는 하위 요소의 너비와 높이 - 가로 및 세로 센터링
  

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

• 의사 요소 방법 - 세로 센터링
  

		 .father{
            position: relative;
        }
        .father::before{
            content: " ";
            display: inline-block;
            height: 100%;
            width: 1%;
            vertical-align: middle;
        }
        .son{
            display: inline-block;
            vertical-align: middle;
        }

자세한 HTML/css 지식을 보려면 css를 방문하세요. 영상 튜토리얼 칼럼!

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