微信小程序居中詳解

一、微信小程序居中設置

微信小程序作為一款獨立應用程序，設計到居中的設置較多，下面是一些經典案例。

1. 在wxml中使用flex布局實現居中

  


.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.child {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

以上代碼將會使得一個寬高均為100像素的方塊在頁面中居中，可根據實際情況自行調整寬高。

2. 在wxml中使用margin實現居中

  


.container {
  width: 100%;
  height: 100%;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: auto;
}

以上代碼同樣可以實現寬高為100像素的方塊在頁面中居中，但是與使用flex布局的方式有些不同。

二、微信小程序字體居中

在微信小程序中文字的居中同樣需要注意一些細節。

1. 在wxml中使用text-align實現文字居中

  這句話會居中


.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text {
  text-align: center;
}

以上代碼將使得一句話在頁面中水平居中。

2. 在wxml中使用line-height實現文字垂直居中

  這句話會垂直居中


.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text {
  line-height: 100px;
  height: 100px;
}

以上代碼將使得一句話在頁面中垂直居中。

三、微信小程序居中屬性

在微信小程序中，除了上述的使用css屬性進行居中，還可以使用一些框架特有的居中屬性。

1. 在wxml中使用center實現居中

  


.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.child {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  center: 1;
}

以上代碼將使得一個寬高為100像素的方塊在頁面中居中，使用了center屬性。

2. 在wxml中使用center實現文字居中

  這句話會居中


.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text {
  center: 1;
}

以上代碼將使得一句話在頁面中水平居中，同樣使用了center屬性。

四、微信小程序居中方框怎麼做

在微信小程序中實現一個居中方框可以參考以下代碼。

  


.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
}

以上代碼將會生成一個寬高為200像素的圓角矩形，該矩形會在頁面中居中並添加了陰影效果。

五、微信小程序居中置頂方框怎麼做

在微信小程序中實現一個居中置頂的方框可以參考以下代碼。

  


.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  margin-top: 30%;
}

以上代碼將會生成一個寬高為200像素的圓角矩形，該矩形會在頁面中垂直置頂並添加了陰影效果。

六、微信小程序居中了怎麼放大

在微信小程序中對於居中元素的放大可以通過使用transform進行實現。

  


.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  transform: scale(1.2);
}

以上代碼將會生成一個寬高為200像素的圓角矩形，該矩形會在頁面中居中並且放大。

七、微信小程序居中樣式代碼怎麼用選取

在微信小程序中選取某一個元素進行居中處理可以在wxml進行同一設置，代碼如下所示。

  


.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
}

以上代碼將會生成一個寬高為200像素的圓角矩形，該矩形會在頁面中居中並添加了陰影效果。可根據實際情況進行自行調整寬高、顏色等屬性。