수평 및 수직 센터링 효과를 달성하는 CSS(3) 요약

CSS는 수평 및 수직 중앙 정렬을 구현합니다.

CSS에서 수평 중앙 정렬을 구현하는 것은 비교적 간단합니다. 일반적으로 인라인 요소 또는 인라인 블록 요소의 수평 중심을 달성하려는 경우 블록의 수평 중심을 달성하려면 상위 블록 수준 요소에 text-align: center를 설정할 수 있습니다. -레벨 요소, magin: auto를 설정할 수 있습니다. 그리고 수직 중앙 정렬을 달성하려는 경우 쉽지 않을 수 있습니다. text-align: center实现；如果想实现块级元素的水平居中对齐，可以设置magin: auto。而如果想实现垂直居中对齐，或许就不太容易。

以下，我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处，望指出。

水平垂直居中的实现可以分为两大内容，一是高度随内容自适应变化，一是固定高度。

固定高度实现水平垂直居中

方法一

最常用的方法是使用height + line-height的方式，设置同样的值，配合text-align的使用，即可实现文本的水平垂直居中对齐

<p class="container">Hello World！</p>.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

缺点：固定高度，无法实现两行文本的垂直居中对齐

方法二

使用绝对定位的方法，配合margin负值使用。可以实现元素的水平垂直居中效果。

<p class="container">Hello World！</p>.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

当然了，可以使用CSS3的calc函数简化上面的CSS代码

.container {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

缺点：固定高度，高度无法自适应内容。元素脱离文档流。

方法三

添加空标签的方式，并且使该元素浮动，脱离文档流，避免影响其他元素的布局。

<p class="space"></p>
<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.space {    float: left;
    height: 50%;
    margin-top: -150px;
}

.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

缺点：这种方式下的垂直居中需要固定高度，无法实现内容自适应高度。同时，出现多余的空p元素。

高度自适应实现水平垂直居中

方法一

CSS3中有transform属性，此属性下有一个translate移动函数，此函数接受两个参数。如果两个参数都为百分比值，此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative相似。

<p class="container">Hello World！</p>.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半    border: 1px solid red;
}

优点：无需定高度。高度随内容自适应。
缺点：元素脱离文档流。如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。

方法二

我们知道，可以使用margin来实现水平居中对齐，而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}

上面代码中，由于百分比是基于父元素（此时的父元素为body元素）的宽度计算的，所以此时的50%加上translate负值并不能实现垂直居中布局。

不过，CSS中存在一个vh（视口高度）,也就相当于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度，1vh=1%，即1vh等于视口高度的1%。vh单位的浏览器兼容性问题可看vh。因此，以上代码可改为如下，即可实现水平垂直居中效果。

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

方法三

CSS3中存在flex布局（伸缩布局盒模型，也叫弹性布局盒模型），对于flex熟悉的朋友来说，使用flex实现水平垂直居中是再简单不过的了。

<p class="container">
    <p class="inner">
        <p>hello world!</p>
    </p>
</p>.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

当我们使父元素display: flex时，margin: auto不仅可以水平居中，也能够实现垂直居中。这是因为auto外边距会平分水平或垂直方向上的额外空间。

当然，也可以使用justify-content: center来定义弹性项目主轴的对齐方式，align-items: center来定义弹性项目侧轴的对齐方式。

<p class="container">
    <p class="inner">
        <p>hello world</p>
    </p>
</p>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

方法四

可以使用display: table来模拟表格，并给子元素设置display: table-cell，让其成为表格的某个单元格，同时设置vertical-align: middle

아래에서는 수평 및 수직 중심 정렬을 달성하는 몇 가지 방법을 요약했습니다. 부족한 점이 있다면 지적해주세요.

가로 및 세로 센터링 구현은 크게 두 가지 콘텐츠로 나눌 수 있습니다. 하나는 콘텐츠에 따라 높이가 적응적으로 변경되고, 다른 하나는 고정 높이입니다.

고정 높이로 수평 및 수직 센터링 달성

방법 1

가장 일반적인 방법은 height + line-height를 사용하여 동일한 값을 설정하고 text-align을 사용하여 텍스트 정렬을 수행하는 것입니다. 및 수직 중앙 정렬

🎜🎜🎜

<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.container {
    display: table;         /* 让p以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

🎜단점: 높이가 고정되어 텍스트 두 줄의 수직 중앙 정렬을 달성할 수 없습니다.🎜

방법 2

🎜절대 위치 지정 방법을 사용하고 음수 여백 값을 사용합니다. 요소의 수평 및 수직 센터링 효과를 얻을 수 있습니다. 🎜🎜🎜🎜rrreee🎜물론 CSS3의 calc 기능을 사용하면 위 CSS 코드를 단순화할 수 있습니다🎜🎜🎜🎜rrreee🎜단점: 높이가 고정되어 있어 콘텐츠에 맞게 높이를 조정할 수 없습니다. 요소가 문서 흐름에서 벗어납니다. 🎜

방법 3

🎜빈 태그를 추가하고 요소를 문서 흐름 밖으로 띄워 다른 요소의 레이아웃에 영향을 주지 않도록 합니다. 🎜🎜🎜🎜rrreee🎜단점: 이러한 방식으로 수직 센터링을 수행하려면 고정 높이가 필요하며 콘텐츠 적응 높이를 달성할 수 없습니다. 동시에 중복된 빈 p 요소가 나타납니다. 🎜🎜가로 및 세로 센터링의 높이 적응 구현🎜

방법 1

🎜 CSS3에는 변환 속성이 ​​있습니다. 이 속성 아래에는 이동 이동 기능이 있습니다. 두 매개변수가 모두 백분율 값인 경우 이동은 자체 너비와 높이를 기반으로 합니다. 이 함수의 이동 메커니즘은 position:relative와 유사합니다. 🎜🎜🎜🎜rrreee🎜장점: 높이를 설정할 필요가 없습니다. 높이는 내용에 맞게 조정됩니다. 🎜단점: 요소가 문서 흐름을 벗어났습니다. 중앙에 정렬해야 하는 요소의 높이가 이미 뷰포트의 높이를 초과하는 경우 해당 요소의 상단은 뷰포트에 의해 잘립니다. 🎜

방법 2

🎜여백을 사용하여 수평 중앙 정렬을 달성할 수 있다는 것을 알고 있지만, 수직 중앙 정렬에 여백을 사용할 수 없는 이유는 여백의 백분율 값이 너비를 기준으로 계산되기 때문입니다. 🎜🎜🎜🎜rrreee🎜위 코드에서는 상위 요소(이때 상위 요소가 body 요소)의 너비를 기준으로 백분율을 계산하므로, 이때 50%에 번역의 음수 값을 더한 값은 계산할 수 없습니다. 세로 중앙 레이아웃을 구현합니다. 🎜🎜그러나 CSS에는 DOM의 document.body.clientHeight 또는 document.documentElement.clientHeight의 높이와 동일한 vh(뷰포트 높이)가 있습니다. , 1vh =1%, 즉 1vh는 뷰포트 높이의 1%와 같습니다. vh 장치의 브라우저 호환성 문제는 vh를 참조하세요. 따라서 위의 코드를 다음과 같이 변경하면 수평 및 수직 센터링 효과를 얻을 수 있습니다. 🎜🎜🎜🎜rrreee

방법 3

🎜 CSS3에는 flex 레이아웃(탄성 레이아웃 상자 모델이라고도 불리는 접이식 레이아웃 상자 모델)이 있습니다. Flex를 사용하여 수평 및 수직을 구현하는 방법입니다. 센터링이 이보다 더 간단할 수는 없습니다. 🎜🎜🎜🎜rrreee🎜부모 요소를 display: flex로 만들면 margin: auto를 가로 중앙에 맞출 수 있을 뿐만 아니라 세로 중앙에도 맞출 수 있습니다. 이는 자동 여백이 추가 공간을 수평 또는 수직으로 양분하기 때문입니다. 🎜🎜물론 justify-content: center를 사용하여 가변 항목의 주축 정렬을 정의하고 align-items: center를 사용하여 유연한 항목의 측면 축 정렬. 🎜🎜🎜🎜rrreee

방법 4

🎜 display: table을 사용하여 테이블을 시뮬레이션하고 display: table-cell을 하위 항목으로 설정할 수 있습니다. 요소를 테이블의 셀로 만들고 vertical-align: middle을 설정하여 수직 중앙 레이아웃을 구현합니다🎜🎜🎜🎜rrreee🎜 🎜🎜이 방법을 사용하면 키. 수평 및 수직 센터링 효과를 얻으려면 높이를 지정하거나 높이를 지정하지 않아도 됩니다. 🎜

위 내용은 수평 및 수직 센터링 효과를 달성하는 CSS(3) 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!