当前位置：首页 > Web前端 > CSS

CSS-垂直水平居中法

时间：2023-03-31 11:23:08 CSS

参考链接整理搬移css纵横居中方法区分内联元素和块级元素。center;Flex布局设置display:flex;justify-content:center;(灵活使用)垂直居中设置：父元素高度确定的单行文本(行内元素)，垂直居中：setheight=line-height;父元素高度确定多行文本（行内元素），垂直居中：先设置display:table-cell再设置vertical-align:middle；如果一个块级元素中包裹了多个内联元素，其中一个元素是特殊的，例如：大写加粗文本、图片图标、垂直居中：这个元素被设置了{vertical-align:middle;}/*对应text-bottom/text-top为底部对齐/顶部对齐*/块级元素居中方式移动端，使用方法6和方法7支持PC端可变宽高的情况。如果要考虑兼容性，可以在PC端使用方法4。如果中间元素的高度不固定，可以使用方法5。方法一：position加margin兼容性：各大浏览器都支持，IE6不支持

/**css**/.wrap{位置：相对；宽度：200px；高度：200px；背景：粉色；}.wrap.content{位置：绝对；宽度：100px；高度：100px；背景：天蓝色；;底部：0；margin:auto;}方法二：diaplay:table-cell兼容性：由于display:table-cell，IE67不兼容

/*css*/.wrap{宽度：200px；高度：200px；背景：粉色；显示：表格单元格；垂直对齐：居中；text-align:center;}.content{display:inline-block;垂直对齐：中间；宽度：100px；高度：100px；不支持CSS3新属性transform，移动端表现更好/*css*/.换行{位置：相对；背景：粉色；宽度：200px；高度：200px；}.content{位置：绝对；背景：天蓝色；顶部：50%；左：50%；-webkit-transform:translate(-50%,-50%);变换：翻译（-50%，-50%）；宽度：100px；height:100px;}方法四：位置（固定宽高）兼容性：适用于所有浏览器/div>/*css*/.wrap{背景：粉色；无线dth：200px；高度：200px；位置：相对；}.content{背景：天蓝色；位置：绝对；宽度：100px；高度：100px；左：50%；顶部：50%；-top:-50px;}方式五：兼容低版本浏览器，不固定宽高不固定宽高，自适应/*css*/.table{height:200px;/*高度值不能小于*/width:200px;/*宽度值不能少*/display:table;位置：相对；向左飘浮;背景：粉色；}.tableCell{显示：表格单元格；垂直对齐：中间；文本对齐：居中；*位置：绝对；填充：10px；*顶部：50%；*left:50%;}.content{*position:relative;*顶部：-50%；*左：-50%；background:skyblue;}方法六：flex;align-items:center;justify-content:center适合移动端/div>/*css*/.wrap{背景：粉色；宽度：200px；高度：200px；显示：弹性；}.content{背景：天蓝色；宽度：100px；高度：100px；保证金：自动；}

上一篇：译文：如何用CSS显示多行文字的省略号

下一篇：如何让多个元素均等对齐来划分布局

CSS-垂直水平居中法相关文章

最新推荐

猜你喜欢