小程序进阶 | 您所在的位置:网站首页 › 水平居中和居中对齐 › 小程序进阶 |
简介
学习小程序,掌握一些前端常用的方法和逻辑很重要,平常注意总结,在需要的时候才能信手拈来。居中对齐,在页面布局中太过常见,所以能够有效的实现水平居中和垂直居中的效果尤为重要,能够实现不是目的,我们追求的是效率,一旦遇到类似的问题,能够立马找到对应的解决办法。下面我将会总结我们常用的几种居中对齐方法,与大家一起讨论。 水平居中 若该元素是行内元素,给其父元素设置 text-align:center,即可实现行内元素水平居中。若是块级元素, 给该元素设置 margin:0 auto即可。若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置: fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器。 .parent{ width: -moz-fit-content; width: -webkit-fit-content; width:fit-content; margin:0 auto; } 使用display:flex 布局,它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。 .parent{ display: flex; justify-content: center; } 使用CSS3中新增的transform属性 .child{ position:absolute; left:50%; transform:translate(-50%,0); } 使用绝对定位方式, 以及负值的margin-left .child{ position:absolute; width:500px; left:50%; margin-left:-50%; } 使用绝对定位方式, 以及left:0;right:0;margin:0 auto .child{ position:absolute; width:100px; left:0; right:0; margin:0 auto; } 垂直居中 若元素是单行文本, 则可设置 line-height 等于父元素高度 .parent { height:300px; line-height:300px; } 若元素是行内块级元素, 可使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央 .parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:''; height:100%; } 可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效。对于其他块级元素,我们设置父元素display:table, 子元素 display:table-cell;vertical-align:middle; .parent { display:table; } .child { display:table-cell; vertical-align:middle; } 使用CSS3新增属性Flexbox .parent { display: flex; align-items: center; } 使用transform .parent { position:relative } .child{ position:absolute; top:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } 设置父元素相对定位(position:relative) .parent { position:relative } .child{ position:absolute; height:100px; top:0; bottom:0; margin:auto 0; } 总结居中对齐的方法,当然不只以上几种,这里我只列举了几种常见或者使用起来比较简单的方法。我们在使用这些方法的时候,注意问题的场景,对症下药才能药到病除。如果你采用这些方法仍然达不到理想的效果,使用绝对的布局也还不错。所谓绝对的布局,其实就是,父级元素和子级元素长宽写死,使用margin,padding的尺寸等于它们的差就可以了。 补充: 按钮文字水平垂直居中怎么做,下面来个实操。 我来了 原始的。 .test { background-color:red; width:200rpx; height:100rpx; }
|
CopyRight 2018-2019 实验室设备网 版权所有 |