小程序进阶-水平居中和垂直居中对齐

简介

学习小程序，掌握一些前端常用的方法和逻辑很重要，平常注意总结，在需要的时候才能信手拈来。居中对齐，在页面布局中太过常见，所以能够有效的实现水平居中和垂直居中的效果尤为重要，能够实现不是目的，我们追求的是效率，一旦遇到类似的问题，能够立马找到对应的解决办法。下面我将会总结我们常用的几种居中对齐方法，与大家一起讨论。

水平居中

若该元素是行内元素，给其父元素设置 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值来达到目的。
参考：
https://www.w3cschool.cn/cssref/
https://juejin.im/post/6844903474879004680