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

居中有多少种方法

时间：2023-04-05 10:53:15 HTML5

前言居中可以说是网页布局中非常常见的布局，垂直居中和水平居中，分为块级元素和行内元素。清除。让我们看看有多少种不同的居中。Horizo??ntallycenteringinlineelementsHorizo??ntallycenteringinlineelements水平居中内联元素最常见的场景是文本居中。最常用的方法是将text-align:center设置为其父元素。该方法对以下元素有效：display:inlinedisplay:inline-block,display:inline-tabledisplay:inline-flexMyBlog

.parent{文本对齐：居中；}块级元素水平居中1.设置内联元素使用居中看完内联元素的居中，我们很容易想到可以手动将块级元素设置为内联元素，然后使用text-align:center来center还是我的博客

.parent{text-align:center;}.child{display:inline;背景色：红色；color:white;}当然，如果元素有设置宽高的话，需要设置display:inline-block。2.使用左右边距：auto通过将块元素的左右边距设置为auto，左右边距可以平分剩余空间。结果自然是元素水平居中。但前提是块元素需要设置宽度

>.child{width:100px;高度：50px；保证金：0自动；background-color:blue;}通过控制台查看从布局中可以看到，蓝色元素的左右两侧被等宽的外边距占据。这种方式比较适合元素占据单行的情况，因为margin已经满了，不能再添加其他元素了。3、使用table+margin让块级元素获得宽度除了手动设置宽度外，还可以设置display:table。这时候元素的宽度就是内容的宽度，所以块状元素内部一定要有内容，否则会塌陷消失。也占了一整行。我的博客>.child{display:table;保证金：0自动；背景色：蓝色；color:white;}4.使用absolute+transform先设置父元素为相对定位，对子元素使用绝对定位，将子元素向右移动父元素的宽度，再移动子元素在子元素本身宽度的左侧I.parent{position:relative;}.child{background-color：蓝色的;白颜色;左：50%；//左侧设置百分比为父元素宽度的百分比transform:translateX(-50%);//translateX百分比是占自身宽度的百分比position:absolute;}这样设置的元素脱离了正常的文档流，不影响其他元素的布局。但是不支持设置transform属性的浏览器比较少。5.使用flex+justify-content这也是我用的最多的居中方式。通过使用flex布局方式，可以轻松实现水平居中。设置对齐内容：居中；实现子元素的水平居中。其中justify-content用于设置弹框元素在主轴（默认横轴）方向的对齐方式我的博客。父{显示：flex;证明内容：中心；}.child{背景颜色：蓝色；color:white;}可以看到我们没有设置子元素的宽度，在flex布局下div宽度自动收缩到content宽度，效果和使用display:table一样。这时候也可以通过设置margin:0auto来居中，但这显然不是我们使用flex布局的初衷。通过使用flex布局，元素不需要脱离正常的文档流，也不需要占用一行。当然，少部分浏览器不兼容在所难免。6、使用绝对定位元素自动拉伸代码如下：.parent{position:relative;}.child{位置：绝对；/*绝对定位*/width:200px;高度：100px；背景：蓝色；保证金：0自动；/*水平居中*/left:0;/*这里不能省略，为0*/right:0;/*这里不能省略，为0*/}多块级元素水平居中1.使用flex布局使用灵活布局（flex），多块级元素也可以水平居中。我的博客我的博客我的博客.parent{显示：flex;证明内容：中心；}.child{背景颜色：蓝色；白颜色;margin-left:10px;//只是为了分隔元素}2.使用inline-block将要水平排列的块元素设置为display:inline-block，然后在父元素上设置text-align:center，达到与上述内联元素水平居中相同的效果。我的博客我的博客我的博客.parent{text-align:center;}.child{background-color:blue;白颜色;左边距：10px；display:inline-block;}浮动元素水平居中1.fixed宽非浮动元素设置相对+负边距。原理如下图所示：我的博客.child{background-color:blue;宽度：100px；高度：50px；位置：相对；左：50%；margin-left:-50px;}注意：样式是在浮动元素本身设置的，父元素不需要设置。容器相对定位并居中.parent{float:left;位置：相对；左：50%；}.child{背景颜色：蓝色；宽度：100px；高度：50px；向左飘浮;位置：相对；right:50%;}可以看到父元素组件也偏移了。Layoutflex布局，这里就不细说了，使用和上面一样的方法让内联元素垂直居中垂直居中1.line-height=height使父元素的行高等于height，实现内联元素垂直居中我的博客

.parent{background-color:red;白颜色;高度：120px；line-height:120px;}.child{}screenshot:2.使用表格布局（table）使用vertical-align:middleoftablelayout实现垂直居中。parent{background-color:red;显示：表格；高度：140px；}.child{显示：表格单元格；vertical-align:middle;}块级元素垂直居中1.absolute+negativemargin当高度已知时，可以使用top:50%让元素顶部的距离为父元素高度的一半元素，然后使用-margin将元素向上移动自身高度的一半，原理其实和上面的水平居中是一样的.parent{位置：相对；背景色：古董白；height:200px;}.child{背景色:米色;位置：绝对；顶部：50%；高度：100px；宽度：200px；很容易想到另一种方法，就是用transform来置换元素。原理完全一样，就不一一列举了。2、使用flex+align-items使用flex布局，通过设置父元素的align-items实现子元素垂直居中.parent{背景色：古董白；height:200px;//父元素必须有高度才能实现垂直居中display:flex;对齐项目：中心；}.child{背景颜色：米色；高度：100px；width:200px;}这个方法也仅限于行内元素，将改为

MyBlog

水平垂直居中1.Flex布局水平垂直居中是水平居中和垂直居中的结合，但最方便的方式是使用flexlayout.parent{background-color:古董白;height:200px;//父元素必须有高度才能垂直居中display:flex;对齐项目：居中；//垂直居中justify-content:center;//水平居中}.child{background-color:beige;高度：100px；width:200px;}2.margin:auto容器元素设置为flex布局或者grid布局，子元素只需要写margin:auto，不兼容低版本的IE浏览器。.parent{背景色：古董白；高度：200px；显示：网格；}.child{背景色：米色；高度：100px；宽度：200px；父元素填充margin时，居中方案有将近20种。当然，他们在实际开发中不会用到那么多。就我而言，margin:auto是用得最多的和flex布局，学习这么多目的性知识是为了更加熟悉CSS的一些特性，比如-margin-left就是把元素向左移动，而-margin-right会让元素右边的元素唯一，元素本身保持不变。不研究这个特性真的不知道。也可以看出，最方便的flex布局不支持老浏览器，存在一定的兼容性问题，但我想说的是，除非你是建政府网站，否则没必要考虑老古董的兼容性比如IE6。没必要为了兼容而改正过去，只会让自己反感。参考文章Howtocenteranelement(finalversion)(部分图片取自这里)CanIuseFlexLayoutTutorial--RuanYifengHowCenteringanElement(Normal,AbsolutePositioning,FloatingElements)这15个CSS居中可以使用方法你有哪些？

上一篇：HTNL5的新功能是拖放

下一篇：Vue常用工具函数Util.js

居中有多少种方法相关文章

最新推荐

猜你喜欢