文本对齐

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   div:nth-of-type(1) {  text-align: center; }

优点：兼容性好

缺点：只对行内元素有效；属性会影响到后续内容；子元素的宽度必须小于父元素

绝对定位

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   div:nth-of-type(1) {  position: relative; } div:nth-of-type(1) p {  position: absolute;  left: 50%;  transform: translateX(-50%); }

优点：不管是块级还是行内元素都可以实现

缺点：代码较多;脱离文档流;使用transform兼容性不好（ie9+）

边缘

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   div:nth-of-type(1) {  width: 100px;  margin: 0 auto; }

优点：兼容性好

缺点：必须设置宽度，子元素的宽度必须小于父元素

屈

 

 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777   div:nth-of-type(1) {  display: flex;  justify-content: center; }

优点：大众主流;强大;简单

缺点：PC端兼容性不好，移动端（Android4.0+）