【Css/小程序】如何实现div或view中的文字左右居中和垂直居中？（已解决：多行和单行自适应）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Css/小程序】如何实现div或view中的文字左右居中和垂直居中？（已解决：多行和单行自适应）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、效果

1、多行居中效果

小程序view居中,5.【css】,4.【html】,0.【小程序】,css,前端,html

2、单行照样居中效果

小程序view居中,5.【css】,4.【html】,0.【小程序】,css,前端,html 文章来源地址https://www.toymoban.com/news/detail-756831.html

二、代码

<view class="title">
  <view class="word">
    大众ABS传感器速腾迈腾途观新捷达CC一汽高尔夫6明锐前后轮速原厂
  </view>
</view>


.title {
  width: 100%;
  height: 55px;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: bold;
  padding-left: 10px;
  background-color: rgb(255, 255, 255);
}

.word {
  width: 96%;
  /* height:40px; */
  height:auto;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

三、自适应的div里实现上下左右居中

<html>
<body>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="right">
    <div class="content">
      通过这种方式，左边两个子div的宽度将保持不变，右边的子div将自动适应父容器中剩余的宽度。你可以根据自己的要求，修改示例中的宽度和背景颜色等样式属性来适应你的需求。
    </div>
  </div>
</div>
</body>
<style>
.parent {
  display: flex;
}

.child {
  height: 80px;
  width: 200px;
  background-color: antiquewhite;
  border: 1px solid #000;
}

.right {
  height: 80px;
  flex-grow: 1;
  background-color: rgb(220, 220, 243);
  display: flex;
  align-items: center; /* 垂直居中 */
}

.content {
  margin: 0 auto; /* 左右居中 */
  text-align: center; /* 文本居中 */
}
</style>
</html>

到了这里，关于【Css/小程序】如何实现div或view中的文字左右居中和垂直居中？（已解决：多行和单行自适应）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！