實現(xiàn)實現(xiàn)div元素和文字水平及垂直居中的方法如下：
div元素水平居中：style="margin:0 auto"
div元素垂直居中：style="padding: (外層div的高-內層div的高)/2; background-clip:content-box; "
div文字水平居中：外層div中style="text-align: center; "
div文字垂直居中：內層div中style="line-height: 外層div的高; "
具體的代碼展示（下面兩種方法效果相同）：
寫法1：
<template>
<div style="width: 500px; height: 300px; background-color: red; margin:0 auto; ">
<div style="width: 300px; height: 200px; background-color: yellow; margin:0 auto; padding: 50px; background-clip:content-box; text-align: center; ">
<div style="color: blue; line-height: 200px;">hello world</div>
</div>
</div>
</template>
寫法2：文章來源：http://www.zghlxwxcb.cn/news/detail-549987.html
<template>
<div class="red_rectangle">
<div class="yellow_rectangle">
<div class="blue_text">hello world</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.red_rectangle {
width: 500px;
height: 300px;
background-color: red;
margin:0 auto;
}
.yellow_rectangle {
width: 300px;
height: 200px;
background-color: yellow;
margin:0 auto;
padding: 50px;
background-clip: content-box;
text-align: center;
}
.blue_text {
color: blue;
line-height: 200px;
}
</style>
效果展示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-549987.html
到了這里，關于實現(xiàn)div元素和文字水平及垂直居中的方法（超簡單，適應各種場合）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
