【CSS篇】css居中解决方法
时间：2023-03-30 16:35:55
CSS
水平居中[inlineelement]适用于inline、inline-block、inline-table、inline-flex元素。center{text-align:center;}[块级元素]适用于块级元素①块级元素。中心{边距：0自动；}②多个块级元素方法一：将块级元素变成内联块级元素HTML部分：1
2
3
css部分：.inline-block-center{text-align:center;}.inline-block-centerdiv{display:inline-block;text-align:left;}方法二：flex布局html部分：1
2
3
css部分：.flex-center{display:flex;justify-content:center;}verticallycentered[inlineelement]①单个内联元素：情况一：当链接或文本有换行元素时，设置上下相等padding.link{padding-top:30px;padding-bottom:30px;}情况二：当链接或文字不换行时，设置行高和行高相等。center-text-trick{高度：100px；line-height:100px}②更多内联元素：方法一：在table-cell中放置多个内联元素html部分：css部分：表td{返回地面：黑色；白颜色;填充：20px；边框：10px纯白色；/*默认为vertical-align:middle;*/}方法二：设置父元素为display:table，自身设置为display:table-cellhtml部分：1
css部分:.center-table{显示：表格；高度：250px；width:240px;}.center-tablep{display:table-cell;vertical-align:middle;}方法三：使用felexhtml部分：
1
css部分：.flex-center{display:flex;证明内容：居中；弹性方向：列；height:400px;/*父容器必须有一个固定的高度*/}方法四：当以上代码都不行时，可以试试这个技巧html技术部分：
1
css部分：.ghost-center{position:relative;}.ghost-center::before{content:"";显示：内联块；高度：100%；宽度：1%；vertical-align:middle;}.ghost-centerp{display:inline-block;vertical-align:middle;}【块级元素】①已知元素高度（绝对定位+负边距）.parent{position:relative;}.child{位置：绝对；顶部：50%；高度：100px；边距顶部：-50px；/*是元素高度的一半，如果没有box-sizing就是height+padding+border的一半*/}②不知道元素的高度（和前面的方法类似）.parent{位置：相对；}.child{位置：绝对；顶部：50%；transform:translateY(-50%);}③flexlayout.parent{display:flex;弹性方向：列；justify-content:center;}水平和垂直居中①固定宽高的元素.parent{position:relative;}.child{width:300px;高度：100px；填充：20px；位置：绝对；顶部：50%；左：50%；margin:-70px00-170px;/*注意这里是height+padding+*/}的一半②没有固定宽高的元素（和之前一样没有固定宽高的元素，用transform解决）.parent{位置：相对；}.child{位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}③使用flexboxlayout.parent{display:flex;证明内容：居中；align-items:center;}上面的居中方式基本可以满足日常需求。如有错误欢迎指正~
