高度自适应的水平垂直居中布局
Posted kevoin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高度自适应的水平垂直居中布局相关的知识，希望对你有一定的参考价值。
高度自适应实现水平垂直居中
方法一
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;
}
使用此种方式，不需要固定高度。只需要给定任意高度或者不给高度，即可实现水平垂直居中对齐
以上是关于高度自适应的水平垂直居中布局的主要内容，如果未能解决你的问题，请参考以下文章