css居中+垂直居中汇总

水平居中：

1.文本/行内元素/行内块级元素：text-align:center;

2.flex布局：display:flex; justify-content:center;

3.常用(前提：已知width值)：margin-left:auto; margin-right:auto; margin:0 auto;

4.不定宽块状元素水平居中:改变块状元素的 dispaly 属性为 inline， 然后给父级设置 text-aline：center 来实现水平居中， 缺点：不能再给元素设置宽高

5.transform+absolute:就算不知道元素宽高也可以使用

.parent{ position: relative; } .son{ position: absolute; left: 50%;/*先根据父元素偏移他的一半*/ transform: translateX(-50%);/*再根据自身的宽度反向偏移一半*/ }

6.利用绝对定位元素的特性:宽度由内容撑开:局限性在于需要确定元素的宽高才可以使用。

.parent{position: relative;} .son{ position: absolute; left: 0; right: 0; margin: 0 auto; }

垂直居中：

一、行内元素

1.（块级元素）文本：自身

text-align:center; line-height:块级盒子高度;

2.（行内元素）文本：样式设置父元素（块）

text-align:center; line-height:块级盒子高度;

3.（行内元素）文本：样式设置父元素（块）和自身(行内)

.cellCenter{   display: table; } .cellitem{   display: table-cell;   vertical-align: middle;   text-align: center; }

4.（行内元素）文本：样式设置父元素（块）

display: flex; justify-content: center; flex-direction: column;

二、块级元素

1.绝对定位居中之margin版：（已知宽高）自身

position: absolute; top: 50%; left: 50%; margin-left: 负自身宽度的一半; margin-top: 负自身高度的一半;

2.绝对定位居中之margin：auto版：（已知宽高）自身

position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

3.绝对定位居中之translate版：（不知宽高） 自身

position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

4. flexbox居中:样式设置父元素

display: flex; justify-content: center; align-items: center;