文本对齐
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { text-align: center; }
优点：兼容性好
缺点：只对行内元素有效；属性会影响到后续内容；子元素的宽度必须小于父元素
绝对定位
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { position: relative; } div:nth-of-type(1) p { position: absolute; left: 50%; transform: translateX(-50%); }
优点：不管是块级还是行内元素都可以实现
缺点：代码较多;脱离文档流;使用transform兼容性不好（ie9+）
边缘
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { width: 100px; margin: 0 auto; }
优点：兼容性好
缺点：必须设置宽度，子元素的宽度必须小于父元素
屈
<div> <p> 7777 777777777 777777777777 77777 7777 77777 77777 7777 77777 7777777 7777 777777 77777 7777 777777 7777 777 777 77 7 7777 7777 </p> </div> div:nth-of-type(1) { display: flex; justify-content: center; }
优点：大众主流;强大;简单
缺点：PC端兼容性不好，移动端（Android4.0+）
