一、效果
1、多行居中效果
2、單行照樣居中效果?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-756831.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-756831.html
?二、代碼
<view class="title">
<view class="word">
大眾ABS傳感器速騰邁騰途觀新捷達(dá)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%);
}三、自適應(yīng)的div里實(shí)現(xiàn)上下左右居中
<html>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="right">
<div class="content">
通過(guò)這種方式，左邊兩個(gè)子div的寬度將保持不變，右邊的子div將自動(dòng)適應(yīng)父容器中剩余的寬度。你可以根據(jù)自己的要求，修改示例中的寬度和背景顏色等樣式屬性來(lái)適應(yīng)你的需求。
</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>
到了這里，關(guān)于【Css/小程序】如何實(shí)現(xiàn)div或view中的文字左右居中和垂直居中？（已解決：多行和單行自適應(yīng)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
