前言CSS居中一直是我想整理记录的。布局也是现在最方便的布局，广泛应用于PC端和移动端。容器{显示：flex；对齐项目：居中；justify-content:center;}gridlayoutcenteredgridlayout是一个比flex布局更强大的，但是目前兼容性不好，我用的不多，不过也可以实现centering.container{display:grid;对齐项目：居中；justify-content:center;}display:table-cell传统上比较新的方法，我用的不多，直接加上text-align:center;.container{display:table-cell;垂直对齐：中间；text-align:center;}绝对定位传统方式适合绝对定位.container{position:relative;}.child{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}specialmethodusingvertical-align:中间的特性与中心线对齐，内部用伪元素凸起。如果需要水平居中，加上text-align:center。.container{宽度：200px；高度：200px；边框：1px纯红色；text-align:center;}.container::before{content:'';显示：内联块；宽度：0；高度：100%；vertical-align:middle;}简单的方法就是垂直居中。如果不加固定高度，使用padding使上下padding相等，就可以实现垂直居中。如果需要水平居中，添加text-align:center，适合一些比较简单的场景。container{padding:10px40px;text-align:center;}单行文本固定行高垂直居中如果需要固定高度再实现垂直居中，可以设置高度为行高。同样，如果需要水平居中，添加text-align:center;.container{line-height:50px;文本对齐：居中；height:50px;}水平居中的块级元素，设置固定宽度，左右边距等于autodiv{width:200px;margin:0auto;}行级元素以块级父级为中心，允许内部匿名行框（text）、行内元素（span）、inline-block元素在parent.container中水平居中。{text-align:center;}我的博客会同步到腾讯云+社区，欢迎大家加入：https://cloud.tencent.com/dev...
