在前端开发中除了实现div居中之外，还经常需要让字体水平垂直居中，div实现水平垂直居中可以参考
使用flex布局和translate实现div水平和垂直居中
，文字的水平和垂直居中代码实现如下
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.contain1{
width: 100%;
height: 100%;
.contain1 > div{
position: absolute;
width: 50%;
height: 50%;
.div2{
right: 0;
background: rgba(149,64,36,0.6);
/*开启flex布局*/
display: flex;
/*垂直居中*/
align-items: center;
/*水平居中*/
justify-content: center;
.div3{
top: 50%;
background: cyan;
display: flex;
align-items: center;
justify-content: center;
.div33{
width: 200px;
background: rgba(36,49,64,0.6);
/*height+line-height控制字体垂直居中
* text-align控制字体 水平居中*/
height: 200px;
line-height: 200px;
text-align: center;
</style>
</head>
<div id="contain1" class="contain1">
<div id="div2" class="div2">
我是居中字体
<div id="div3" class="div3">
<div id="div33" class="div33">我是居中字体</div>
</body>
</html>
效果如图：
在前端开发中除了实现div居中之外，还经常需要让字体水平垂直居中，div实现水平垂直居中可以参考使用flex布局和translate实现div水平和垂直居中，文字的水平和垂直居中代码实现如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .contain1{ wi
align-self:用于单独设置自身在侧轴的对齐方式。
flex-wrap:决定弹性元素溢出容器时的换行方式
align-content:用于修改换行后（设置了flex-wrap），在多行情况下，行与行之间的对齐方式。
弹性子元素属性：
order:规定了弹性子元素的排列。从小到大排列，可以通过改变个别元素order的大小来改变其在容器中的排列情况。
align-self:用
在安卓机上使用line-height垂直居中，有时会有些许偏差，但是css完全是没有问题的。先搬运一下其他博主的分析：http://www.fly63.com/article/detial/399?type=1
解决方案：
方法一：运用flex布局
<span class="test">{{ item.value }}</span>
.test {
di...
如何
实现以下情景：
外部盒子先
使用display:
flex; justify-content: center; align-items: center; 将文字所在的内容盒子水平垂直居中于外部盒子中间，再将内容盒子display:
flex; align-items: base
line; 将内容盒子里面的文字基于第一个文字的底部对齐。
html部分
<div class="box">
<div class="content">
<div class="num">8
我们在这要谈的是用flex布局来实现水平和垂直居中。随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。所以09年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。
我们想用flex布局居中的话就得先了解什么是flex布局，flex布局也叫弹性布局。就是能够实现一些特殊的布局方式。言归正传，fle...
对于一行文字，我们经常有垂直居中的要求。比如我们制作一个按钮时，其上的文字。
这时候，利用CSS的方法，将line-height设置为对象的height时，此对象中的文字则会垂直居中。
本来这个方法不会有太多问题，但是当我们给这个对象设置border时，问题就来了。我在做按钮时，给我的按钮设置了border: 2px solid #ddd;由于按钮不算太大，我使用此方法，并没有发现有什么不妥。
好的，我来回答您的问题。
首先，让我们来看一下
line-
height的作用。
line-
height是用来设置行高的属性，它可以决定一行文字的高度，也可以影响文字的垂直居中。
如果想让文本垂直居中，我们可以将
line-
height设置为与容器高度相等的值，例如：
```
css
.container {
height: 200px;
line-
height: 200px;
这样，文字就会在容器中垂直居中了。
而对于图片和文字的垂直居中，可以
使用以下方法：
```html
<div class="container">
<img src="image.jpg" alt="">
<span>文本内容</span>
```
css
.container {
display:
flex;
align-items: center;
这里我们
使用了
flex布局，并将align-items设置为center，这样图片和文字就可以垂直居中了。
希望这些能对您有所帮助。
