简介
学习小程序,掌握一些前端常用的方法和逻辑很重要,平常注意总结,在需要的时候才能信手拈来。居中对齐,在页面布局中太过常见,所以能够有效的实现水平居中和垂直居中的效果尤为重要,能够实现不是目的,我们追求的是效率,一旦遇到类似的问题,能够立马找到对应的解决办法。下面我将会总结我们常用的几种居中对齐方法,与大家一起讨论。
水平居中
若该元素是行内元素,给其父元素设置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的尺寸等于它们的差就可以了。
补充:
按钮文字水平垂直居中怎么做,下面来个实操。
<button class="test"><text>我来了</text></button>
原始的。
.test {background-color:red;width:200rpx;height:100rpx;}
2. 默认是块级标签,居中对齐。但我们想要的布局肯定不会这么直白。我们加个display:inline-block看看。
.test {display: inline-block;background-color:red;width:200rpx;height:100rpx;}
正常,再来。
.test {display: inline-block;background-color:red;width:100rpx;height:60rpx;}
咦?不正常,字体没有缩小,改下font-size试试
.test {
display: inline-block;
background-color:red;
width:100rpx;
height:60rpx;
font-size: 20rpx;
}
怎么回事?看到这是不是懵了,我也是!加个text-align看一看。
.test {display: inline-block;background-color:red;width:100rpx;height:60rpx;font-size: 25rpx;text-align: center;}
没有用!加个line-height看一下。。。
.test {display: inline-block;background-color:red;width:100rpx;height:60rpx;font-size: 25rpx;text-align: center;line-height: 60rpx;}
还是没有用?加个padding看一下
.test {display: inline-block;background-color:red;width:100rpx;height:60rpx;font-size: 25rpx;padding: 0;}
卧槽!可以了啊,怎么回事。。。。
总结:从上面,我们可以知道,button默认居中对齐,但文字长度超过阈值,居中效果就会失效。这时,我们可以重新设置padding值来达到目的。
参考:
/cssref/
https://juejin.im/post/6844903474879004680
如果觉得《小程序进阶-水平居中和垂直居中对齐》对你有帮助,请点赞、收藏,并留下你的观点哦!