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

原创已于 2023-07-31 15:05:50 修改 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2022-12-26 11:34:47 首次发布

5.【css】同时被 3 个专栏收录

85 篇文章

订阅专栏

4.【html】

83 篇文章

订阅专栏

0.【小程序】

55 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本及元素在多行和单行情况下的居中效果的方法，并展示了如何通过Flexbox让div元素在自适应容器中实现上下左右居中。

一、效果

1、多行居中效果

2、单行照样居中效果

二、代码

<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>