个人对CSS中“居中”的一些总结

Posted 2020-09-04

居中主要可以分为文字居中和图片居中：

1文字与图片都可以使用的方法：

文字使用此方法最好先转换成行类块元素

（1）相对定位：先将文字与图片在页面中输出 然后观察你希望将它移到什么位置  

{position:relative；

top：？；botton：？；left：？；right：？；}

（2）绝对定位：为父级设置相对定位position:relative；子级设置position:absolute；

子级相对于自己的父级移动；

（3）margin和padding设置上下左右，top，botton，left，right

（4）margin：auto  直接在板块中水平居中

2针对文字的：

text-align：center；水平居中在这个元素设置的宽高里面

line-height：行与行之间的距离，可以直接使文字在行里垂直居中

特殊居中：一个子级的框架要居中在它的父级框架中及它们两个的中心的要重合

最开始子级在在父级的左上角

方法：1子级绝对定位父级，下移父级高的50%，左移父级宽的50%，然后自己右移自己宽的50%，上移自己高的50%