开发中经常遇到这个问题，即一个元素的内容在水平和垂直方向上都居中。 内容除了限于文字之外，还可以是图片或者其他元素。 而且我们希望不要涉及长度和高度，即我们不知道父元素的宽度和高度，也不知道内容元素的宽度和高度。 本文将总结如何实现水平居中和垂直居中的方法。
不适当的解决方案
文本对齐和行高
显然，使用text-align和line-height的方法更适合单行文本，但不适合本文的需求。 特别是，在不知道高度的情况下，无法保证 line-height 垂直居中。 而且即使是文本，我们也不知道文本有多少行。
位置：绝对、50% 和边距：-px
大多数情况下，我们可以考虑这些解决方案，通过对positioning和margin设置负值来偏转想要居中的元素，使其在垂直方向上居中。 该方案不需要父元素的高度，即虽然父元素的高度发生变化，但仍然可以保持在父元素的垂直中心，水平方向也进行同样的操作。 但是这里有一个问题，就是我们的要求是这个内部元素的长度和高度往往是不确定的。 例如，如果是一段文本，你无法保证这段文本的字数，那么你可以使用margin的负值来偏转这些元素。 案例不起作用。
位置：固定，0 和边距：自动
当我们想要制作一个模态对话框弹出框，比如弹出广告或者屏幕居中的登录框时。 这时候就可以考虑一些相对于窗口或者网页居中的解决方案。
.container {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
this is a box fixed in center of screen
这里最重要的是margin:auto;，对于块级元素来说，在确定了自己的长度之后，margin:auto可以帮助其居中，即使是在position:fixed的情况下。 但是必须指定要居中的元素的宽度和高度，这不能满足我们的需求。
位置：绝对、0 和边距：自动
上面的固定方案只适合整个窗口居中。 fixed 会将元素移出页面，因此它仍然不适用于内容流。 您还希望实现内容流的居中，如下所示：
.container {
position: relative;
}
.inner-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.inner {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
This is a p
this is a box fixed in center of screen
第一种是使用 margin:auto ，其方式与其中相同，但使用绝对值。 如果使用绝对定位，父元素也必须有位置（不是静态的）。 因此，将 .inner 放在位置为 .inner-wrapper 的父元素中。 这样，.inner就相对于.inner-wrapper居中了（前提是.inner必须有宽度和高度）。 同样的原因，需要设置宽度和高度，所以不能满足我们的需求。
正确的解决方案
1. 显示：表格和显示：表格单元格
这种方案是最容易理解的，因为表格具有垂直居中的属性，所以很容易通过属性来实现。
.container {
display: table;
}
.inner {
display: table-cell;
vertical-align:middle;
text-align:center;
}
you own content
在这种情况下，我们可以随意改变.inner的宽度和高度，而内部内容保持居中。
2.位置：绝对、50%和平移
css3上提供了translate函数，其主要作用是位移，传递给transform属性。
.container {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
your own content
html代码与之前相同。 translate(-50%, -50%) 会将元素平移其长度和高度的 -50%。 这种方法可能和一开始就否定的负margin值的用法是一样的css3 div水平垂直居中，可以说是margin负值的替代方案。 这对你来说很容易理解。 该方法最强大的部分是不需要确定.inner的宽度和高度，并且.container的宽度和高度也不需要自动设置，如果它本身被拉伸的话。 这里只是为了演示方便，特意设置了宽度和高度。
3. vw vh 并翻译
vh和vw是两个比较偏的单位，指的是“视口高度和宽度的1%”。 例如，50vh是当前图元高度（窗口的高度，包括实验中的滚动条）的50%。 也就是说，大众将获得类似于1%的车窗间距。 因此，固定好后使用比较合适。
.inner {
position:fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}
this is a box fixed in center of screen
其实和使用50%没有太大区别，因为此时top和left的50%是相对于父元素的，这与margin和padding不同。 如果保证金是绝对必要的，可以由此衍生出一个变体：
.inner2 {
position:fixed;
top: 0;
left: 0;
margin: 50vh 0 0 50vw;
transform: translate(-50%, -50%);
}
vh vw只能从窗口的大小来考虑，不适合正常的文本流。 但有时它会非常有用，尤其是在做全屏应用时css3 div水平垂直居中，比如全页。
4. :之前和显示：inline-block
这也是一种处理方法，通过伪类:before减少元素中的新增元素然后使用display:inline-block通过高层处理得到想要的效果。
.container{
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
display: inline-block;
}
this is a box fixed in center of screen
The second line
这个计划有点多，不太好理解。 首先，.container 水平居中没有问题。 接下来，将.container伪类:before设置为height:100%，这样就可以利用伪元素获得与.container中父元素相同的高度空间。 然后使用inline-block和vertical-align: middle来改变对齐的基线。 我对此了解不多。 这里有一篇文章可供参考。 通过:before后，.container中的行级元素的对齐基线移动到居中位置，实现垂直居中对齐。此时，如果上面只有一行文本，则.inner可能不会被使用，但是有一个
，这是不同的。 如果将文本直接放在.container上，
前面的文本将基于 :before 基线并保持垂直对齐。但是
下面的文本会另起一行，而这一行会从 :before 的下一行开始，所以会低于 :before 的 100% 高度，导致它被从 .container 中弹出。 但是，如果将文本放在 .inner 上并使 .inner 成为内联块，则可以使 .inner 和 :before 位于同一基线上，以便整个 .inner 垂直居中。
5. CSS3 弹性
CSS3增加了与布局相关的属性，其中flex布局可以非常简单地帮助我们实现我们想要的效果。
.container {
display: flex;
align-items: center;
justify-content: center;
}
this is a box fixed in center of screen
The second line
简单解释一下，当display:flex时，表示容器内部的元素会按照flex进行布局。 align-items:center 表示该元素将相对于容器水平居中，justify-content:center 出于同样的原因也垂直居中。 将这种样式分配给 .container 后，由于其内部元素 .inner 会自觉地居中。 而这里你会发现，因为没有使用text-align:center，所以.inner上面的文字不会居中，也就是说只有容器.inner居中。
总结
从之前的可行方案来看，大致可以分为两类：显示对齐方案和平移位移方案。 显示解决方案是充分发挥css的布局特性，利用布局和UI引擎的特性来控制布局中的对齐方式。 Translate的解决方案是使用位移，通过前50%的位移，可以通过position，也可以通过margin vw vh，但是完成后通过translate将元素拉回来。 之所以使用translate而不是margin，是因为translate是相对于元素本身的，而margin则不是。
发表评论