CSS居中【集成】
时间：2023-03-30 16:25:32
CSS
text-align:center在父容器中水平居中内联文本，或者内联元素vertical-align:middle垂直居中内联文本，内联元素，withdisplay:table,display:table-细胞有奇效。line-height和height共同作用使文本垂直居中margin:auto示例：<``style``>#ex2_container{width:200px;背景颜色：黄色；}#ex2_content{边距：0px自动；背景色：灰色；白颜色;显示：表格；<``divid="ex2_container"><``divid="ex2_content">HelloWorldhacks（提示）有很多技巧、负边距、阴影元素::之前等。如果不是固定大小，您的大部分内容都是脆弱的。translate(-50%,-50%)使用position加translatetranslate(-50%,-50%)比较奇特，百分比计算不是基于父元素，而是基于自身。示例：<``style``>#ex3_container{width:200px;高度：200px；背景颜色：黄色；职位：相对；}#ex3_content{左：50%；顶部：50%；变换：翻译（-50%，-50%）；-webkit-transform:translate(-50%,-50%);背景色：灰色；白颜色;位置：绝对；}<``divid="ex3_container"><``divid="ex3_content">HelloWorld这个技巧蛮牛的，对于没有固定大小的内容，min-width，max-height，overflow:scroll等也适用。绝对定位让父容器元素居中：50%``；高度``：50%``；溢出``：自动``；边距``：自动``；位置``：绝对``；顶部``：0``；左``：0``；底部``：0``；right``:0``;}注意：必须定义高度，建议加上overflow:auto，防止内容溢出。视口居中内容元素：position:fixed,z-index:999，记住父容器元素位置：relative.Absolute-Center.is-Fixed{width``:50%``;height``:50%``;溢出``：自动``；边距``：自动``；位置``：固定``；顶部``：0``；左``：0``；底部``：0``；``:0``;z-index``:999``;}响应式百分比宽高，最大最小宽度都可以，也可以加padding.Absolute-Center.is-Responsive{width``:60%``;height``:60%``;min-width``:400px``;max-width``:500px``;padding``:40px``;overflow``:auto``;margin``:auto``;position``:absolute``;top``:0``;左``：0``；底部``：0``；right``:0``;}offsetaslongasmargin:auto;中，内容块会垂直居中，top,left,bottom,right可以设置偏移量。.Absolute-Center.is-Right{width``:50%``;height``:50%``;margin``:auto``;overflow``:auto``;position``:absolute``；顶部``：0``；左``：自动``；底部``：0``；right``:20px``;text-align``:right``;}overflowcenteredcontentthanparentcontainer高的时候，防止溢出，加上overflow:auto（没有padding的时候，也可以加上max-高度：100%；）。.Absolute-Center.is-Overflow{width``:50%``;height``:300px``;max-height``:100%``;margin``:auto``;overflow``:auto``；位置``：绝对``；顶部``：0``；左``：0``；底部``：0``；对``：0``；大小可调。设置最小/最大限制大小，确保添加overflow:auto。.Absolute-Center.is-Resizable{min-width``:20%``;max-width``:80%``;min-height``:20%``;max-height``:80%``;resize:both``;overflow``:auto``;margin``:auto``;position``:absolute``;top``:0``;左``：0``；``：0``；right``:0``;}image图片同理，设置height:auto;.Absolute-Center.is-Image{width``:50%``;height``:auto``;margin``：自动``；位置``：绝对``；顶部``：0``；左``：0``；底部``：0``；对``：0``；}必须定义可变高度高度，但可以是百分比或最大高度。如果不想定义高度，使用display:table（需要考虑Table-Cell兼容性）。.Absolute-Center.is-Variable{display``:table;width``:50%``;overflow``:auto``;margin``:auto``;position``:absolute``;top``：0``；左``：0``；底部``：0``；right``:0``;}负边距知道宽度和高度，负边距是宽度和高度的一半。.is-Negative{width``:300px``;height``:200px``;padding``:20px``;position``:absolute``;top``:50%``;left``:50%``;margin-left``:-170px``;/*(width+padding)/2*/margin-top``:-120px``;/*(height+padding)/2*/}Table-Cell结构：<``divclass="Pos-Containeris-Table"><``divclass="Table-Cell"><``divclass="Center-Block">``样式：.Pos-Container.is-Table{display``:table;}.is-Table.Table-Cell{display``:table-cell``;vertical-align``:middle``;}.is-Table.Center-Block{width``:50%``;margin``:0auto``;}FlexBox.Pos-Container.is-Flexbox{display``:-webkit-box;display``:-moz-box;display``:-ms-flexbox;display``:-webkit-flex;display``:flex;-webkit-box-align:center``;-moz-box-align:center``;-ms-flex-align:center``;-webkit-align-items:center``;align-items:center``;-webkit-box-pack:center``;-moz-box-pack:center``;-ms-flex-pack:center``;-webkit-justify-``内容``：中心``；居stify-``content``:center``;}这里推荐我的前端学习交流群：784783012，都是学习前端的。如果你想制作炫酷的网页，学习编程，我整理了一份2018年最全的前端学习资料，从最基础的HTML+CSS+JS【炫酷特效、游戏、插件打包、设计patterns]针对移动端HTML5项目实战学习资料，整理送给每一位前端小伙伴，想学习web前端，转行，大学生，想提升能力的小伙伴们工作，在读的朋友欢迎加入学习。点击：加入
