css居中方法总结（见包会）

1.水平居中方式1（推荐）div:nth-of-type(1){width:100px;高度：100px；边框：1px纯黑色；}div:nth-of-type(1)>div{边距：0自动；宽度：50px；高度：40px；边框：1px纯黑色；}方法二：设置子元素为display:inline-block（不推荐）div:nth-of-type(1){width:100px;高度：100px；边框：1px纯黑色；文本对齐：居中；}div:nth-of-type(1)>div{显示：内联块；宽度：50px；高度：40px；边框：1px纯黑色；}方法三使用绝对定位，父亲设置相对定位，左右设置为0div:nth-of-type(1){position:relative;宽度：100px；高度：100px；边框：1px纯黑色；文本对齐：居中；}div:nth-of-type(1)>div{位置：绝对；汽车;宽度：50px；高度：40px；边框：1px纯黑色；}方法4使用flex布局实现div:nth-of-type(1){display:flex;弹性方向：行；证明内容：居中；宽度：100px；高度：100px；边框：1px纯黑色；文本对齐：居中；}div:nth-of-type(1)>div{宽度：50pX;高度：40px；边框：1px纯黑色；}2.垂直居中方法1使用绝对定位div:nth-of-type(1){position:relative;宽度：100px；高度：100px；边框：1px纯黑色；文本对齐：居中；}div:nth-of-type(1)>div{位置：绝对；顶部：0；底部：0；保证金：自动；宽度：50px；高度：40px；;}方法二使用flex布局实现div:nth-of-type(1){display:flex;对齐项目：居中；宽度：100px；高度：100px；边框：1px纯黑色；文本对齐：居中；}div:nth-of-type(1)>div{width:50px;高度：40px；边框：1px纯黑色；}3水平加垂直居中1.内容居中text-align:center使用CSS对齐元素水平居中比较简单。行级元素设置其父元素的text-align居中，line-height:200px#这里的200px是行的高度。自然内容可以居中2.使用display:flexlayoutdiv:nth-of-type(1){display:flex;弹性方向：行；证明内容：居中；对齐项目：居中；}3.使用定位position居中方法一（不推荐）div:nth-of-type(1){position:relative;宽度：100px；高度：100px；border:1pxsolidblack;}div:nth-of-type(1)>div{posi化：绝对的；顶部：50%；左：50%；边距顶部：-20px；左边距：-25px；宽度：50px；高度：40px；border:1pxsolidblack;}方式二（推荐）div:nth-of-type(1){position:relative;宽度：100px；高度：100px；border:1pxsolidblack;}div:nth-of-type(1)>div{position:absolute;顶部：0；左：0；右：0；底部：0；保证金：自动；宽度：50px；高度：40px；边框：1px纯黑色；}