浅谈css中的元素居中方式

一、文本的居中（这里只讨论inline，block，inline-block这三种常见的元素）

1、当文本的父元素是inline时
默认的inline带文本元素的显示效果是文字和边框都是靠左上


边框内居中：文本在inline里默认就是居中设置。
边框外居中：
a.（单行文本）给父元素添加text-align: center; 可以实现inline子元素的水平居中:


（多行文本）可以自适应:


单行文本）当父元素有固定高时，给子元素添加 line-height:父元素的高; 可以实现垂直居中:


（多行文本）不能自适应


2、当文本父元素是block时
默认的带文本block元素的显示效果是文字靠左边布置，元素占一行，所以在没有设置width时边框外处于水平居中状态


a.边框内文本居中：
（单行文本）给元素添加text-align:center; 可以使文本在元素中水平居中


（多行文本）能够自适应


（单行文本）当元素有固定高时，给元素添加line-height：元素的高; 可以让文本在元素内垂直居中


（多行文本）不能自适应


b.边框外居中：
（单行文本）给元素添加margin：0 auto；可以让元素在父元素中水平居中


（多行文本）能够自适应


3、当父元素是inline-block时
默认带文本的inline-block元素的显示效果是文字靠左边布置，随文字按照文档流方向占用


边框内文本居中:
（单行文本）给元素添加text-align:center; 可以让文本在元素内水平居中，前提是元素有宽度


（多行文本）能够自适应


（单行文本）当元素有固定高时，给元素添加line-height: 元素的高度; 可以让文本在元素内垂直居中


（多行文本）不能够自适应，注意和block元素的区别，会导致右边元素进行换行流动


边框外居中:
（单行文本）给父元素添加text-align:center; 可以让元素水平居中


（多行文本）能够自适应


（单行文本）给元素添加vertical-align：middle；可以让元素垂直居中，具体步骤如下：
1、首先左右居中，给父元素添加text-align：center；注意子元素要为inline-block。
2、添加“标尺”（为了确定顶线、中线、基线、底线）在子元素的后面添加同级元素span标签，并且不能有回车（确保span和子元素在同一行）
3、“标尺”元素类型必须是inline-block
4、给“标尺”确定中线，添加属性vertical-align: middle;
5、给“标尺”设置width: 0; height: 100%;


（多行文本）能够自适应

元素的居中：

当元素宽高固定时
1、结合绝对定位position：absolute;以及margin:负值; 来实现


2、结合绝对定位 position: absolute; 以及margin：auto; 来实现


3、结合绝对定位position: absolute; 以及 calc() 来实现


解析：css3 属性calc(expression)， 功能主要用于计算，（expression，一个数学表达式，结果将采用运算后的返回值 ）expression使用 “+” “-” “*” “/”进行四则运算，可以使用 “%” 、px 、em、rem等单位，可以进行混合单位的记得计算，如 left: calc(50% - 200px);数值与符号之间需要空格。
兼容性（暂时只讨论pc端）：Firefox 4.0—15.0需要添加浏览器前缀-moz-，16.0+就不需要了。Chrome19.0~25.0需要添加浏览器前缀-webkit-，26.0+就不需要了。Safari6.0需要添加浏览器前缀-webkit-，6.1+就不需要了。Opera 15.0+支持原生标准不带前缀的写法。IE9.0+也支持原生标准不带前缀写法。

当元素宽高不固定，自适应
1、结合绝对定位position: absolute; 以及 transform来实现


解析：transform是css3里属性，所以书写的时候需要带浏览器前缀兼容性（只讨论pc端）Firefox 3.5+ 可以支持Chrome 1.0x+ 可以支持Safari 3.1+ 可以支持Opera 10.5+ 可以支持IE9.0+ 可以支持
2、利用line-height、text-align: center; 、vertical-align: middle;实现元素居中（元素转换为inline-block元素：为了让子元素能继承父元素的行高）


3、利用浮动float以及相对定位position：relative实现居中，两种情况：
自适应情况：不知道.content的宽高，让content在demo中水平居中


解析：给content套一个txt的盒子，给txt浮动（为了让txt脱离文档流，不继承父元素的宽，让content将txt撑开，把txt的display设置为inline-block也是可行的），再给txt相对定位，left: 50%; ，给content也相对定位，left: -50%;，注意，这种方法是不能用在垂直居中上.

非自适应（知道子元素的宽高）：


解析：给txt设置和content一样的高度，然后就可以进行相对定位的垂直居中了.
4、结合writing-mode（定义文本在垂直、水平方向上如何排布）以及text-align的继承性实现元素的居中


解析：先将demo内的文本排列定义为垂直排列，writing-mode:vertical-lr;然后用text-align:center;将文本垂直方向居中，而txt作为demo的子元素，demo上的text-align:center;被txt所继承，txt就垂直居中了（将txt的display值设置为inline-block是因为text-align不作用于block元素，设置成inline也可以），再将txt的文本排列方式定义成水平排列，writing-mode: horizontal-tb; ,width:100%; ,text-algn: center; , 让txt内文本水平居中。最终content继承了两次的text-align: center;（一次垂直居中，一次水平居中）,实现居中的最终效果
5、当子元素不知道宽高时用width: fit-content; 属性实现元素水平居中


注意：fit-content是css3的一个新属性，目前只有Firefox和Chrome支持，书写时要加浏览器前缀
6、display:table-cell,将元素转换为表格元素，利用表格元素的特性，结合text-align:center;和vertical-align:middle;进行子元素的居中


7、flex，将元素display值设置为flex，结合justify-content：center；和align-items:center;对子元素进行居中布局


8、将元素display值设置为grid，结合align-self和justify-self来实现子元素的居中

以上是个人的一些关于css中居中方法的小总结，不喜勿喷，随时欢迎来一起探讨，一起进步，感谢观看。