CSS에서 수평 중앙 정렬을 구현하는 것은 비교적 간단합니다. 일반적으로 인라인 요소 또는 인라인 블록 요소의 수평 중심을 달성하려는 경우 블록의 수평 중심을 달성하려면 상위 블록 수준 요소에 text-align: center
를 설정할 수 있습니다. -레벨 요소, magin: auto
를 설정할 수 있습니다. 그리고 수직 중심 정렬을 달성하려는 경우 쉽지 않을 수 있습니다. text-align: center
实现;如果想实现块级元素的水平居中对齐,可以设置magin: auto
。而如果想实现垂直居中对齐,或许就不太容易。
以下,我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处,望指出。
水平垂直居中的实现可以分为两大内容,一是高度随内容自适应变化,一是固定高度。
最常用的方法是使用height + line-height的方式,设置同样的值,配合text-align的使用,即可实现文本的水平垂直居中对齐
<div class="container">Hello World!</div> .container { width: 300px; height: 300px; line-height: 300px; text-align: center; border: 1px solid red; }
缺点:固定高度,无法实现两行文本的垂直居中对齐
使用绝对定位的方法,配合margin负值使用。可以实现元素的水平垂直居中效果。
<div class="container">Hello World!</div> .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; }
缺点:固定高度,高度无法自适应内容。元素脱离文档流。
添加空标签的方式,并且使该元素浮动,脱离文档流,避免影响其他元素的布局。
<div class="space"></div> <div class="container"> <div class="inner"> hello world! </div> </div> .space { float: left; height: 50%; margin-top: -150px; } .container { clear: both; height: 300px; border: 1px solid red; position: relative; }
缺点:这种方式下的垂直居中需要固定高度,无法实现内容自适应高度。同时,出现多余的空div元素。
CSS3中有transform属性,此属性下有一个translate移动函数,此函数接受两个参数。如果两个参数都为百分比值,此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative
相似。
<div class="container">Hello World!</div> .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // 自身宽度和高度的一半 border: 1px solid red; }
优点:无需定高度。高度随内容自适应。
缺点:元素脱离文档流。如果需要居中的元素已经在高度上超过了视口,那它的顶部会被视口裁切掉。
我们知道,可以使用margin来实现水平居中对齐,而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。
<div class="container">Hello World!</div> .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。因此,以上代码可改为如下,即可实现水平垂直居中效果。
<div class="container">Hello World!</div> .container { width: 300px; margin: 50vh auto 0; transform: translateY(-50%); border: 1px solid red; }
CSS3中存在flex布局(伸缩布局盒模型,也叫弹性布局盒模型),对于flex熟悉的朋友来说,使用flex实现水平垂直居中是再简单不过的了。
<div class="container"> <div class="inner"> <p>hello world!</p> </div> </div> .container { display: flex; height: 100vh; } .inner { margin: auto; }
当我们使父元素display: flex
时,margin: auto
不仅可以水平居中,也能够实现垂直居中。这是因为auto外边距会平分水平或垂直方向上的额外空间。
当然,也可以使用justify-content: center
来定义弹性项目主轴的对齐方式,align-items: center
来定义弹性项目侧轴的对齐方式。
<div class="container"> <div class="inner"> <p>hello world</p> </div> </div> .container { display: flex; justify-content: center; align-items: center; height: 100vh; }
可以使用display: table
来模拟表格,并给子元素设置display: table-cell
,让其成为表格的某个单元格,同时设置vertical-align: middle
<div class="container"> <div class="inner"> hello world! </div> </div> .container { display: table; /* 让div以表格的形式渲染 */ width: 100%; border: 1px solid red; } .inner { display: table-cell; /* 让子元素以表格的单元格形式渲染 */ text-align: center; vertical-align: middle; }
position:relative
와 유사합니다. 🎜rrreee🎜장점: 높이를 설정할 필요가 없습니다. 높이는 내용에 맞게 조정됩니다. document.body.clientHeight
또는 document.documentElement.clientHeight
의 높이와 동일한 vh(뷰포트 높이)가 있습니다. , 1vh =1%, 즉 1vh는 뷰포트 높이의 1%와 같습니다. vh 장치의 브라우저 호환성 문제는 vh를 참조하세요. 따라서 위의 코드를 다음과 같이 변경하면 수평 및 수직 센터링 효과를 얻을 수 있습니다. 🎜rrreeedisplay: flex
로 만들면 margin: auto
를 가로 방향뿐만 아니라 세로 방향으로도 중앙에 배치할 수 있습니다. 이는 자동 여백이 추가 공간을 수평 또는 수직으로 양분하기 때문입니다. 🎜🎜물론 justify-content: center
를 사용하여 가변 항목의 주축 정렬을 정의하고 align-items: center
를 사용하여 유연한 항목의 측면 축 정렬. 🎜rrreeedisplay: table
을 사용하여 테이블을 시뮬레이션하고 display: table-cell
을 하위 요소로 설정하여 만들 수 있습니다. 테이블 특정 셀에 vertical-align: middle
을 동시에 설정하면 세로로 가운데 정렬된 레이아웃을 얻을 수 있습니다🎜rrreee🎜이 방법을 사용하면 높이를 고정할 필요가 없습니다. 수평 및 수직 센터링 효과를 얻으려면 높이를 지정하거나 높이를 지정하지 않아도 됩니다. 🎜위 내용은 CSS를 사용하여 수평 및 수직 센터링을 달성하는 여러 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!