水平居中
1.定宽块级元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
Hello World
复制代码2.不定宽块级元素
- 我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式
- 加入 table 标签
- 设置 display;inline 方法
1.加入 table 标签
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )
第二步：为这个 table 设置“左右 margin:auto”
复制代码这种方法的缺点是增加了无语义的HTML标签，增加了嵌套深度
2.设置 display:inline 方法
改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果
复制代码这种方法的缺点是将块级元素的display设置为inline，于是少了很多功能，比如盒子模型
3 设置 position:relative 和 left:50%;
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%,给子元素设置 position:relative 和 left:-50% 来实现水平居中。
复制代码这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
垂直居中
1.常规元素的垂直居中
容器内元素display:inline/inline-block
这种情况就比较容易了，直接设置容器的text-align就可以实现内容元素的水平居中，设置垂直居中的话要设置容器的高度，然后设置容易的line-height==height就可以，如下：
"container">
我要居中
复制代码2.容器内元素display:block且元素宽高已知
这种情况下我们使用position这个属性结合设置偏移来实现。
首先设置容器的position:relative,设置元素position为absolute
然后设置元素的偏移top,left,margin-top,margin-left，其中top，left设置为50%,而margin-top/margin-left的偏移量均为本身元素高/宽的一半，为负值。
"container">
"inner-box">
复制代码3.容器内元素display:block,且元素宽高未知
这种方法与方法二类似，但是不同的是不能通过设置margin-top/left偏移来达到效果了，因为容器内元素的宽高是未知的。这次通过设置left/top/bottom/right:0,然后设置margin:auto
"container">
"inner-box">
复制代码4 table-cell
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
html
"box box1">
垂直居中
复制代码css
.box1 {
display: table-cell;
vertical-align: middle;
text-align: center;
width:100px;
height:100px;
background-color:red
}
复制代码第二种用法，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b，a和b都是div，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
现在我要让class="box"的div在class="wrapper"的div里面垂直居中，我可以在class="wrapper"的div里面加一个div空标签，把它的高度设为100%，宽度设置为0，再给它一个vertical-align:middle样式，同样的给class="box"的div一个vertical-align:middle样式，那么box就可以在div里面垂直居中了。
"en">
"UTF-8">
CSS垂直居中
"wrapper">
"box">
"help">
复制代码5 display:flex
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
复制代码6 translate
.box6 span{
position: absolute;
top:50%;
left:50%;
width:50%;
height:50%;
transform:translate(-50%,-50%);
text-align: center;
background: #000;
}
复制代码