css-elementcentering

时间：2023-03-30 16:40:09 CSS

本文主要总结了水平居中，垂直居中，水平垂直居中的各种方法。一、水平居中1、内联元素水平居中使用text-align:center;该属性可以实现内联元素（包括：inline、inline-block、inline-table、inline-flex）在块级父元素中的水平居中。css样式：<样式>.parent{text-align:center;边框：1px实心丽贝卡紫色；}.inlineTable{显示：内联表；}.inlineflex{显示：内联柔性；}html结构：我是inline

我是inline-block

我是inline-table

我我是inline-flex2。块级元素水平居中。有许多方法可以水平居中块级元素。下面将一一列举：a．将元素的左右边距设置为自动。cssy样式：.child{边距：0自动；}b。使用absolute+transdorm将父元素相对定位，将子元素定位到绝对左边：50%，然后将子元素向左移动到水平居中。CSS样式：<样式>.child{位置：绝对；左：50%；变换：翻译X（-50%）；}.parent{位置：相对；}html结构：使用absolute+transdormc.使用flex+justify-contentcss3的flex布局存在兼容性问题，使用时需谨慎。css样式：<样式>.parent{显示：flex；证明内容：居中；}html结构：flex+justify-contentd.使用flex+margin设置父元素为flex布局，设置子元素居中css样式：html结构flex+margin3.多个块级元素在html结构中水平居中：多级块元素水平居中多级块元素水平居中多级块元素水平居中PublicStyle.parent{border:1pxsolidrosybrown;}.chlid{宽度：50px；背景：木瓜鞭；右边距：10px；{显示：弹性；证明内容：居中；}css样式2-inline-block+text-align:center4.浮动元素水平居中公共html结构：需要子元素居中1.固定宽度的浮动元素，通过relative+margincssstyle:2.不定宽，父子元素设置相对定位cssstyle:3.使用flex布局（一般不管定宽还是变宽）5.绝对定位的元素水平居中让绝对定位的元素水平居中.parent{位置：相对；}.child{位置：绝对；/*绝对定位*/width:200px;高度：100px；背景：黄色；保证金：0自动；/*水平居中*/left:0;/*这里不能省略，为0*/right:0;/*这里不能省略，为0*/}2.垂直居中1.单行内联元素垂直居中单行内联元素垂直居中。。2.多行内联元素垂直居中a.使用弹性布局(flex)

像没人看一样跳舞，像每个人一样编码。

像没人在看一样跳舞，像每个人一样编码。

像没人看一样跳舞，像每个人一样写代码。

b.使用表格布局（table）3.块级元素垂直居中publichtml结构垂直居中块级元素。一个。使用绝对+负边距（已知高宽）.parent{position:relative;}.child{position:absolute;顶部：50%；高度：100px；边距顶部：-50px;}b。使用absolute+transform.parent{position:relative;}.child{position:absolute;顶部：50%；转换：translateY(-50%);}c.使用flex+align-items.parent{display:flex;对齐项目：居中；}d。使用table-cell+vertical-align.parent{display:table-cell;垂直对齐：中间；}3.水平和垂直居中的公共html结构

>块级元素是垂直居中。方法一：绝对定位和负边距实现（高宽已知）.parent{position:relative;}.child{位置：绝对；顶部：50%；左：50%；保证金：-50px00-50px；}方法二：绝对定位和margin:auto(已知高宽).parent{position:relative;height:200px;//必须有高度}.child{position:absolute;顶部：0；左：0；右：0；底部：0；margin:auto;//注意这里的写法}方法三：绝对定位+CSS3（未知元素高宽）.parent{position:relative;}.孩子{位置：绝对;顶部：50%；左：50%；transform:translate(-50%,-50%);}方法四：flexlayout.parent{height:200px;//必须有高度display:flex;证明内容：居中；对齐项目：居中；}方法五：flex/grid和margin:auto.parent{height:200px;//必须有heightdisplay:grid;}.child{margin:auto;}

上一篇：css自定义复选框样式

下一篇：重学HTML前端（四）关于HTML标签的问题和思考

css-elementcentering相关文章