중간에 CSS는, 직장에서 자주 발생합니다. 이것은 수평 및 수직 중심으로 분할 될 수 있고, 다음과 같은 여러 가지 구현 방식을 중심으로한다.
다음 예에서 속성 값은 CSS 관련.
.parent-frame {
width: 200px;
height: 200px;
border: 1px solid red;
}
.child-frame {
width: 100px;
height: 100px;
border: 1px dotted blue;
}
1 : 텍스트 정렬 : 중앙 수평 중앙
대규모 요소 가로 중앙
<div class="parent-frame">
子元素水平居中
<i style="display:block; text-align: center;color: blue">块状元素，水平居中</i>
</div>
하위 요소 수평 중앙
블록 요소 수평 중심
2 : 여백 : 0 자동, 중간 수준
수평 중심. 브라우저가 자동으로 양분 계산합니다 여백에 대해 0의 외부 국경에서 아래로,
<div class="parent-frame">
子元素水平居中
<i class="child-frame" style="display: block;margin: 0 auto">块状元素，水平居中</i>
</div>
하위 요소 수평 중앙
블록 요소 수평 중심
3 라인 높이 값, 수직 센터링
수직. 라인 (H 라인) 사이의 거리를 설정하는 선 높이 속성. 음수 값은 허용되지 않습니다.
텍스트 요소의 한 줄은 여러 줄 요소는이 방법을 적용하지 않는다 적용됩니다. 원소 함량이 하나의 선이며, 그 높이가 고정되어,
<div class="parent-frame">
<div style="line-height: 200px;">line-height值=父height值</div>
</div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）상위 라인 높이 값 = 높이 값
4 : 플로트 속성은 상대 위치와, 수평 중심 달성
부모 구성 요소는 부모 요소의 우측 50 %의 전체 이동은, 그 전체 서브 엘리먼트의 좌우 중앙 달성하기 위해, 50 %만큼 왼쪽으로 이동되고, 플로트에 배치.
부모 요소를 떠 제거해야합니다.
<div class="parent-frame">
<div style="float: left; position: relative; left: 50%; clear: both;" >
<div style="position: relative; left: -50%">虽然宽度不同weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但一样</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">使用float属性，记得清楚浮动</div>
</div>
</div>
다른 폭이 weiqinl하지만, 동일은 플로트 속성을 사용하여 수평 중심에 있지만, 부동을 선택하지 마십시오
5 : 레이아웃 테이블을 사용하여, 기본 수직 중심
기본 테이블은 수직으로 수직 정렬을 중심으로 : 중간. 당신은 수평 중심 원하는 경우, 그 속성 텍스트 정렬을 추가, 인라인 요소입니다 : 센터
<table class="parent-frame">
<tr>
<td>
table默认垂直居中[vertical-align: middle]
</td>
<td style="text-align:center;">
水平居中添加text-align:center
</td>
</tr>
</table>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）6 : 모방 테이블 디스플레이 표 셀. 그리고 수직 정렬 재산, 수직 센터링을 사용하여
수직 배향의 소자의 특성이.
소자 행의 기준선 기준 라인에 대해 수직 인 요소의 정의에 정렬된다. 테이블 셀에서,이 속성 세트 셀 정렬 셀을 상자입니다.
<div class="parent-frame" style="display: table-cell;vertical-align: middle">
仿table: display:table-cell垂直居中vertical-align:middle
</div>
모조 테이블 : 디스플레이 표 셀 상하 수직 정렬 중심 : 중간
7 : 절대 절대 위치는 여유를 사용하여, 수평 및 수직 중심을 달성
소정의 폭의 절대 상대적인 수요는 절대 위치에 대응. 한편, 위 / 아래가 동일해야하고, 합은 소정의 폭을 초과하지 않는다. 오른쪽 / 왼쪽 같아야하고, 합은 소정의 폭을 초과하지 않는다.
자동차 사용 : 함께 여유
<div class="parent-frame" style="position: relative">
利用绝对定位，配合margin:auto自动计算外边距。
<div class="child-frame" style="position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">
定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
</div>
</div>
여백의 자동 자동 계산 : 여유 절대 위치를 사용합니다. 요소들은 크기가 결정되어야, 폭 고정. 하위에 위치 결정 부재에 대하여.
(8) 수평 및 수직의 센터링을 달성하기 위해 음 (음의 마진)의 마진의 절대 절대 위치.
음의 마진 구조 붕괴를 이끌 음의 마진을 달성하기 위해이 기능을 사용한다.
<div class="parent-frame" style="position: relative;">
利用绝对定位，配合margin的负值来实现居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">
负边距来实现，水平垂直居中。需要知道该元素的具体大小
</div>
</div>
중앙을 달성하기 위해 음의 마진과, 절대 위치를 사용한다. 음의 여백은 수평 및 수직 중심을 얻을 수있다. 당신은 요소의 정확한 크기를 알 필요가
9 : 절대 절대 위치는 변환, 수평 및 수직 중심으로 운동 변환
절대 위치 소자의 비율을 사용하고,을 이용하여, 이동 측위 센터 요소 번역.
<div class="parent-frame" style="position: relative;">
利用绝对定位，配合translate移动到水平垂直居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
不需知具体大小。支持IE9+及现代浏览器
</div>
</div>
수직 변환 가로 끼워 절대 위치를 사용. 특정 크기를 알 수 없습니다. 지원 및 현대적인 브라우저 IE9 +
10 : 플렉스 레이아웃, 속성을 설정하면, 정렬-항목, 센터 - 콘텐츠를 정당화있는 수평 및 수직 중심을 달성하기 위해
플렉스 부모 요소 레이아웃은 두 속성 값은 콘텐츠 정당화 정렬 - 상품 센터이며, 그 중심은 수평 및 수직 방향으로 정의하는 정의
정당화 컨텐츠 속성은 스핀들에있는 항목의 정렬을 정의합니다. 십자가 샤프트를 정렬하는 방법을 정렬-항목은 항목 속성을 정의합니다.
<div class="parent-frame" style="display: flex; justify-content: center; align-items: center">
<div class="child-frame">使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。</div>
<div class="child-frame">
align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中，则水平、垂直居中对齐
</div>
</div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）플렉스 레이아웃은 정당화 컨텐츠 속성은 스핀들에있는 항목의 정렬을 정의합니다. 십자가 샤프트를 정렬하는 방법을 정렬-항목은 항목 속성을 정의합니다. 두 속성이 집중되어, 수평이 수직 중심
11 : 수평 및 수직 중심을 달성하기 위해, 자동차 사용 : 이익률 플렉스 레이아웃을 사용.
부모 요소 마진을 사용하는 플렉스 레이아웃, 하위 요소를 사용 : 자동
<div class="parent-frame" style="display: flex;">
<div style=" margin: auto;">父元素使用flex布局，子元素配合margin:auto使用</div>
</div>
부모 요소 플렉스 레이아웃, 여백과 하위 요소를 사용 : 자동 사용