css水平居中的5种几种方式
2022/7/3 23:25:40
本文主要是介绍css水平居中的5种几种方式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
元素水平居中的第一种方式 子元素不需要宽度也可以
<div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: pink; } .son { width: 300px; margin: auto; text-align: center; background: red; } 使用的是margin:auto 这样在水平方向上就可以居中了
margin: 100px auto 注意点:
有的小伙伴说:想要上下有一点的间距 可以使用 margin: 100px auto; 但是使用之后,我们发现了一些小的问题。 从上面效果图可以发现:两个盒子同时向下移动。 这种情况并不是我们想要的。 出现是由 margin塌陷导致的 如何解决这种问题呢? 可以将父元素box变为BFC:overflow: hidden; [ 注意不是超出隐藏的作用 ]
position + left:50% + margin-left:-px 第二种 子元素需要宽度
<div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: pink; position: relative; } .son { width: 300px; background: red; position: absolute; text-align: center; left: 50%; /* 当前盒子的一半 */ margin-left: -150px; }
注意点 left: 50%和 margin-left的区别
扩展点设置left: 50%;并不能实现水平居中的效果: 它是相对父级元素。【相对于父元素box的宽度】 margin-left它是相对自己的宽度。【相对于自己son的宽度】
定位 position + left+ translateX(-50%) 推荐 子元素不要宽度也可以
<div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: aquamarine; position: relative; } .son { width: 300px; text-align: center; background: pink; position: absolute; left: 50%; transform: translateX(-50%); }
父text-align:center + 子display:inline-block 子元素不要宽度也可以
<div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: aquamarine; text-align: center; } .son { width: 300px; text-align: center; background: pink; display: inline-block; } 注意点: 如果仅使用 text-align:center; 是无法达到水平居中的效果的,为什么? text-align:center; 需要在行内块元素上使用的, 而盒子是块级元素,所以。 需要将盒子转换为行内块元素 text-align:center; 才能生效。
弹性布局:display:flex; [推荐] 子元素不要宽度也可以
<div class="box"> <div class="son"> 我是内容 </div> </div> .box { width: 500px; height: 300px; background: aquamarine; display: flex; justify-content: center; } .son { width: 300px; text-align: center; background: pink; }
这篇关于css水平居中的5种几种方式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享