CSS 수직 센터링 솔루션
- 巴扎黑원래의
- 2017-08-09 15:56:531454검색
CSS에서 요소를 가로 중앙에 배치하는 것은 매우 간단합니다. 인라인 요소인 경우 상위 요소에 text-align: center를 적용하고, 블록 수준 요소인 경우 자체에 여백을 적용합니다. 그러나 요소를 수직 중앙에 배치하려는 경우 생각만 해도 신경이 쓰일 수 있습니다.
수년에 걸쳐 수직 센터링은 CSS의 성배이자 프런트 엔드 개발계에서 계속되는 농담이 되었습니다. 그 이유는 다음과 같은 특징을 동시에 갖고 있기 때문입니다.
1) 매우 일반적인 요구사항입니다.
2) 이론적으로는 매우 간단해 보입니다. ， 3) 실제로는 하늘로 올라가는 것이 어려운 경우가 많으며, 특히 크기가 고정되지 않은 요소가 포함된 경우에는 더욱 그렇습니다.
다음으로 이 세 가지 방법의 간단한 사용법을 자세히 설명하겠습니다.
1. 코드 초기화
다음 HTML 코드를 기반으로 id='box'인 div에서 id='content'인 div 요소를 세로 중앙에 배치합니다.
<body>
<div id="box">
<div id="content">这是要居中的元素</div>
</div>
</body> 기본 스타일은 다음과 같습니다. #box{
margin:0;
padding:0;
width:500px;
height:500px;
background: #4AC291;
font-size:100%;
position: relative;
}
#content{
background: #655;
color: white;
text-align: center;
line-height: 2em;
}二、基于绝对定位的解决方法
如果我们想要利用绝对定位的方法进行垂直剧中的话，那么就要求元素具有固定的宽度和高度，如果没有固定的宽度和高度就无法实现，因为需要利用top和left的值，进行定位。
#box{
margin:0;
padding:0;
width:500px;
height:500px;
background: #4AC291;
font-size:100%;
position: relative; //必须的，因为下面的div要根据这个进行定位
}
#content{
background: #655;
color: white;
text-align: center;
line-height: 2em;
position: absolute; //设置绝对定位
top:50%;
left:50%;
width:12em;
height:2em;
margin-top:-1em; // 2/2=1
margin-left:-6em; // 12/2=6
}
如上图所示，是固定宽高的样式效果。
这段代码在本质上做了这样几件事情：先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心，然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半)，从而把元素的正中心放置在视口的正中心。借助强大的 calc() 函数，这段代码还可以省掉两行声明：
#box{
margin:0;
padding:0;
width:500px;
height:500px;
background: #4AC291;
font-size:100%;
position: relative;
}
#content{
background: #655;
color: white;
text-align: center;
line-height: 2em;
/*position: absolute;
top:50%;
left:50%;
width:12em;
height:2em;
margin-top:-1em;
margin-left:-6em;*/
position: absolute;
width: 12em;
height: 2em;
top: calc(50% - 1em);
left: calc(50% - 6em);
}这个方法最大的局限在于它要求元素的宽高是固定的。在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题就迎刃而解了!遗憾的是，对于绝大多数CSS属性(包括 margin)来说，百分比都是以其父元素的尺寸为基准进行解析的。
三、基于视口单位的解决方法
假设我们不想使用绝对定位，仍然可以采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;但是在缺少left和top的情况下，如何把这个元素的左上角放置的容器的正中心呢?
我们的第一反应很可能是用margin属性的百分比值来实现，就像这样：
#content {
width: 12em;
margin: 50% auto 0;
transform: translateY(-50%);
}
这段代码产生的效果十分离谱。原因在于margin的百分比值时以父元素的宽度作为解析基准的。没错，即使对于margin-top和margin-bottom来说也是这样!
不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位，称为视口相关的长度单位。
1) vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示视口宽度的 1%，而不是 100%。
2) 与 vw 类似，1vh 表示视口高度的 1%。
3) 当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。
4) 当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。
四、Flexbox方法（本文主要说明的方法）
Flexbox(伸缩盒)是专门针对这类需求所设计的。我们之所以要讨论其他方案，仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。
我们只需写两行声明即可：先给这个待居中元素的父元素设置 display: flex(在这个例子中是元素)，再给这个元素自身设置我们再熟悉不过的margin: auto。
#box{
display: flex;
min-height:50vh;
margin:0;
width:500px;
height:500px;
background: #4AC291;
}
#content{
margin:auto;
background: #655;
color: white;
}
如果浏览器不支持Flexbox，页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果，但也是完全可以接受的。
Flexbo 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。
위 내용은 CSS 수직 센터링 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!