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

【第一期】说说css居中

时间：2023-03-30 17:34:11 CSS

前言：居中是网页布局中非常常用的一种方法。今天我们就来说说css居中。我们主要从这几个方面来理解居中：水平居中垂直居中水平居中文本的水平居中最简单，加上text-align:center;即可，见如下代码：texthorizo??ntalcentering

.text-center{text-align:center;}注意：父元素必须是块级元素，即display:block;至于什么是块级元素，不在本文讨论范围之内。图片水平居中和文字一样，同样使用text-align:center；对于非图片文本元素，已知宽度的水平居中方法：margin:0auto；比如div元素，假设我们已经知道它的宽度是300px，那么我们可以这样设置，加上margin:0auto;这句话的代码。我是一个水平居中的div

.div1{width:300px;margin:0auto;}对块级元素也有效。方法二：绝对定位+负边距左：50%；宽度：300px；左边距：-150px；//一半宽度}非图片文本元素，未知宽度水平居中方法一：使用text-align:center+inline-block我觉得更简单的方法是Settext-align:centertotheparentelement;添加display:inline-block到子元素；就这样吧，看代码更直观。未知元素宽度

.parent{text-align:center;}.child{display:inline-block;填充：20px；background:red;}方法二：使用绝对定位+transform:translate()在父元素上设置相对定位position:relative;;在子元素position上设置绝对定位：absolute加transform。看下面的例子：我是一个水平居中的div

.parent{position:relative;}.child{position:absolute;左：50%；-webkit-transform:翻译(-50%,0);转换：翻译（-50%，0）；填充：20px；background:red;}注意：为了更好的兼容性，transform在不同的浏览器上需要加上前缀。方法三：使用浮动还是看具体代码：向左飘浮;左：50%；}.child2{位置：相对；右：50%；填充：20px；child4">我是水平居中的div.parent4{position:relative;display:flex;justify-content:center;}.child4{padding:20px;background:red;}注：flex存在兼容性问题，关于flex的兼容性，可以百度下载，也可以在caniuse中查看浏览器的兼容性方法5：fit-content属性“fit-content”是在“width”中新增的"CSS中的一个属性值，他配合margin可以让我轻松实现水平居中的效果。这个方法我也是第一次用，以后有空再仔细研究一下。看在代码中：我是一个水平居中的div.fitContentDiv{width:fit-content;margin:0auto;height:100px;background:red;padding:20px;}must与margin:0auto;一起使用，达到居中效果注意：还有浏览器兼容性问题VerticalcenteringoftextVerticalcenteringof图片已知元素高度垂直居中未知元素高度垂直居中文字垂直居中方法一：height=line-height这个比较简单，只需要设置height和lineheight相等即可。看代码：我是垂直居中的文字

.txt1{height:100px;行高：100px；background:red;}注意：这个方法有个不好的地方，只能用于单行文本，多行不适合。方法二：使用padding，我们可以设置padding-top和padding-bottom相等，这种方法也适用于多行文本。看代码：我是垂直居中的文字

.txt2{padding-top:20px;填充底部：20px；background:red;}注意：这种方法还有一个明显的缺点就是不能设置文本的父元素的高度。方法三：table+table-cell这个方法是利用表格单元格的特性，我们直接看代码：我是垂直居中的文字（这个也可以放图片).parent6{display:table;宽度：300px；高度：300px；背景：蓝色；}.child6{显示：表格单元格；vertical-align:middle;}这个方法是对的图片也可以，文字也可以多行，很不错。图片垂直居中使用vertical-align:middle，看代码即可：

.img-va-center{高度：300px；行高：300px；背景：红色；}.img-va-centerimg{显示：内联块；vertical-align:middle;}已知元素高度垂直居中方法一：绝对定位+负边距看代码：我是垂直居中的div.parent6{位置：相对；高度：300px；背景：红色；}.child6{位置：绝对；顶部：50%；左：0；宽度：50px；高度：50px；边距顶部：-25px；垂直居中方式一：绝对定位+变换直接上传代码：我是垂直居中的div.parent7{position:relative;宽度：300px；高度：300px；背景：红色；}.child7{位置：绝对；顶部：50%；宽度：50px；填充：10px；背景：灰色；-webkit-transform:翻译(0,-50%);transform:translate(0,-50%);}注：还需要考虑tRansform兼容性问题方法二：flex+margin我是垂直居中的div.parent8{display:flex;宽度：300px；高度：300px；背景：蓝色；}.child8{边距：自动；填充：20px；background:gray;}注意：该方法要考虑flex的兼容性。方法三：flex+align-items我是垂直居中的div.parent9{display:flex;对齐项目：居中；宽度：300px；高度：300px；背景：蓝色；}.child9{填充：20px；background:gray;}注意：该方法要考虑flex的兼容性。水平和垂直居中水平和垂直居中是结合了水平居中和垂直居中的方法，这里就不举例了。总结一下，这里虽然列举了这么多例子，但是方法毕竟是死的，业务需求是多变的。具体要根据我们项目的业务需求来使用。CSS非常强大。要实现同样的功能，方法有很多种，不只是我列举的几种。关键是找到适合您业务需求的方式。如果大家有更好的方法欢迎留言讨论。让我们一起学习，共同进步。！

上一篇：CSS - 探究网站变灰色的那些知识盲区的知识碎片

下一篇：前端日常实践：70#视频演示如何用纯CSS制作流浪果冻怪物

【第一期】说说css居中相关文章

最新推荐

猜你喜欢