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

7CSS水平居中的实现方法

时间：2023-03-30 17:12:02 CSS

前言元素居中是前端开发中最常见、使用频率最高的css技巧。不仅在开发中经常用到，面试官提问的时候有时也会问到这种问题。本文主要介绍水平居中的方法。希望它对你和我都有帮助。1.text-align:center实现如果父元素是块级元素，并且包含行内元素，直接给父元素设置text-align:center。如果父元素是行内元素，则不能设置父元素的宽高，所以需要设置为块级元素display:block。也适用于inline、inline-block、inline-table和inline-flex元素的水平居中。HTML//父元素是块级元素我是内联元素

//父元素是内联元素我是内联元素CSS//父元素是块级元素parent{height:300px;width:300px;text-align:center;background:skyblue;}//父元素是行内元素parent{height:300px;width:300px;display:block;text-align:center;在本例中，margin:0auto可用于使元素水平居中。HTML我是内联元素

CSS.parent{height:300px;宽度：400px；背景：#fcc;}.child{高度：100px;宽度：100px；//确保块级元素具有固定宽度的背景：#f66;margin:0auto;}效果：3.table+margin实现首先将子元素设置为块级表格显示（类似），然后设置为水平居中。display:table在性能上类似于块元素，但宽度是内容的宽度。HTML我是块级元素

CSS.parent{height:300px;宽度：400px；背景：#fcc；}.child{显示：表格；背景：#f66；margin:0auto;}效果：4.absolute+transform实现先设置父元素为相对定位，再设置子元素为绝对定位，先设置子元素的left:50%，然后通过移动水平居中孩子的一半宽度向左。固定宽度，设置绝对子元素的元素宽度的margin-left:-halfpx或者设置transform:translateX(-50%)为可变宽度，只使用transform:translateX(-50%)HTML我是块级元素CSS.parent{height:300px;宽度：400px；位置：相对；背景：#fcc;}.child{位置：绝对;背景：#f66；左：50%；转换：translateX(-50%)；//General/**固定宽度可以使用margin-left**/width:100px;margin-left:-50px;}效果：5.absolute+margin通过子元素的绝对定位实现，加上margin:0auto。HTML我是块级元素CSS.parent{height:300px;宽度：400px；位置：相对；背景：#fcc;}.child{位置：绝对;背景：#f66；宽度：200px；高度：100px；保证金：0自动；/*水平居中*/left:0;/*这里不能省略，为0*/right:0;/*这里不能省略，为0*/}作用：6.Flexbox实现采用flexbox布局，只需要添加属性display:flex,justify-content:centerHTML<到要处理的块级元素的父元素divclass="parent">我是块级元素CSS.parent{高度：300px；宽度：400px；显示：弹性；证明内容：居中；背景：#fcc;}.child{高度：100px;宽度：100px；background:#f66;}作用：7、flex+margin实现通过flex将父容器设置为flex布局，然后子元素居中。HTML我是块级元素CSS.parent{height:300px;宽度：400px；显示：弹性；背景：#fcc;}.child{高度：100px;宽度：100px；保证金：0自动；background:#f66;}效果：最后，如果喜欢，欢迎收藏关注。更多优质文章，请访问GitHub博客。欢迎来到星！！！参考文章Howtocenteranelement（最终版）CSS水平居中+垂直居中+水平/垂直居中方法总结

上一篇：em-px-rem区别？em、px和rem之间有什么区别？

下一篇：记录移动端h5页面遇到的一些问题

7CSS水平居中的实现方法相关文章

最新推荐

猜你喜欢