CSS 수직 수평 완전 중심 수동-CSS 튜토리얼-php.cn

CSS 수직 수평 완전 중심 수동

伊谢尔伦

풀어 주다： 2016-11-23 09:21:27

원래의

1157명이 탐색했습니다.

가로 중심 맞추기

인라인 요소(inline 또는 inline-*)가 중심에 있나요?

상위 블록 수준 요소를 기준으로 가운데에 배치할 수 있습니다

.center-children {
  text-align: center;
}

로그인 후 복사

블록 레벨 요소(블록 레벨)가 중앙에 있습니까?

margin-left 및 margin-right를 자동으로 설정하여 중앙에 배치할 수 있습니다(또한 너비도 설정합니다. 그렇지 않으면 채워집니다). 전체 컨테이너에서는 센터링 효과를 볼 수 없습니다).

.center-me {
  margin: 0 auto;
}

로그인 후 복사

블록 수준 요소가 많으면 어떻게 되나요?

수평으로 연속적으로 중앙에 배치되어야 하는 매우 균일한 블록 수준 요소가 있는 경우 다른 디스플레이 유형을 사용하는 것이 좋습니다. 다음은 inline-block과 flex를 사용한 예입니다.

온라인 예: http://jsfiddle.net/ourjs/0b6b7wt8/

<main class="inline-block-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>

로그인 후 복사

<main class="flex-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>
body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}

로그인 후 복사

수직 센터링

수직 센터링 CSS에서 약간 까다로움

텍스트 및 링크와 같은 인라인 요소(인라인 또는 인라인-*)를 중앙에 배치하는 방법은 무엇입니까?

한 줄인가요? <… line-height를 사용하고 높이와 동일하게 만들어 텍스트를 정렬할 수 있습니다.

다선인가요?

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

로그인 후 복사

상단 및 하단 패딩 방법은 여러 줄을 가운데에 배치할 수도 있지만 이 방법이 작동하지 않으면 이러한 텍스트의 컨테이너를 테이블 셀 모드로 표시한 다음 수직 정렬 속성을 설정할 수 있습니다. Talbe처럼 정렬할 텍스트

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

로그인 후 복사

온라인 데모: http://jsfiddle.net/ourjs/0fn2u4rc/

블록 레벨 요소가 수직으로 중앙에 위치합니까?

요소의 높이를 아시나요?

<table>
  <tr>
    <td>
      I&#39;m vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I&#39;m vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

로그인 후 복사

body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

로그인 후 복사

웹페이지 레이아웃의 높이를 모르는 것은 여러 가지 이유로 매우 일반적입니다.

그러나 레이아웃의 높이가 고정된 경우 다음과 같이 세로로 가운데에 배치할 수 있습니다.

요소의 높이를 알 수 없습니다.

알 수 없는 경우에도 , 그래도 너비를 50%까지 늘릴 수 있습니다

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}

로그인 후 복사

온라인 데모: http://jsfiddle.net/ourjs/9sLf7p56/

flexbox를 사용할 수 있나요?

이는 놀라운 일이 아닙니다. Flexbox를 사용하는 것이 훨씬 쉽습니다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

로그인 후 복사

가로 및 세로 모두 중앙에 배치

요소의 너비와 높이가 고정되어 있습니다

<main> 
  <div>
     I&#39;m a block-level element with an unknown height, centered vertically within my parent.
  </div> 
</main>

로그인 후 복사

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

로그인 후 복사

요소의 너비와 높이가 고정된 경우 먼저 요소를 중앙에 배치한 다음 너비의 50%만큼 왼쪽으로 이동해야 합니다. 이 솔루션은 브라우저 간 지원이 뛰어납니다.

.parent {
  position: relative;
}
 
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

로그인 후 복사

　元素的宽度高度未知

　　如果你不知道高度和宽度（可变的），你可以使用transofrm属性在两个方向都平移负50%

.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

로그인 후 복사