实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）

实现实现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：

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

效果展示：

实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）相关推荐

DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
【CSS】使HTML页面表格中文字水平且垂直居中的方法（易错）
问题出现因为是td直接写的文字,并不是套了标签才写,水平居中很清楚就是text-aline: center; 但是垂直居中始终没有得到很好地解决,查找了网上的样式是vertical-align: m ...
[css] 写出你知道的CSS水平和垂直居中的方法
[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中: <div class="outer"><di ...
DIV中文字水平、垂直居中
实现Div层里的文字垂直居中的方法有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正能实现而代码又简洁的介绍不多 ...
如何让DIV相对于body水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
让div在body中水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
android设置文字水平和垂直居中显示,Android TextPaint 写文字水平、垂直居中
在宽width高height的画布上画一字符串,使字符串水平竖直居中: 1.水平居中的方法: 第一步:水平居中很简单,paint.setTextAlign(Align.CENTER); 第二步:dra ...
如何将文字转化为语音？方法超级简单，立马就能学会配音
很多人问:声音不好听可以直接文字转语音配音吗? 当然可以了. 我可以放心的告诉你,配音完全不必担心声音不好听,虽然现在做自媒体短视频和广告的人非常多,但99%的人都不是专业配音员出身,自己配出来的音差 ...
让div中的文字水平垂直居中
总所周知水平居中为:text-align:center 垂直居中为:line-height:100px (此处100px为外边div的宽度)

实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）

实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）相关推荐

最新文章

热门文章