前言

html在线运行https://www.runoob.com/runcode

方法1：容器高度不固定

将容器的padding-top和padding-bottom的值设置成相等的值。

<!DOCTYPE html>
<html>
<head>
<style>
div.test {border:1px solid #000000;
padding-top: 30px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="test">我要居中</div>
</body>
</html>

方法2：容器高度固定

<!DOCTYPE html>
<html>
<head>
<style>
div.test {height: 60px;
border:1px solid #000000;
line-height: 60px;
}
</style>
</head>
<body>
<div class="test">我要居中</div>
</body>
</html>

方法3：flex布局

<!DOCTYPE html>
<html>
<head>
<style>
div.test {height: 120px;
border:1px solid #000000;display: flex;
align-items: center; /*定义body的元素垂直居中*/
}
</style>
</head>
<body>
<div class="test">我要居中</div>
</body>
</html>

【css】文字垂直居中相关推荐

CSS 文字垂直居中自适应 - 代码篇
CSS 文字垂直居中自适应 - 代码篇引言 <div>内的文字能在图片缩放的同时,自动居中(自适应居中),详情看下列代码. 效果图: 解决办法 · 代码示下: /*CSS代码*/ .h3 ...
实现css文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到 https://www.jb51.net/article/17825 ...
java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
文字竖直居中 html,CSS 文字垂直居中
1.高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中 HTML 这是要居中的文字 CSS 给要居中元素设置一个伪元素 .son{ height: 50%; back ...
css 文字垂直居中
css样式中提供了text-align=center 实现的是水平居中,但没有提供直接的垂直居中,具体原因不得而知,实现方式可以通过设置行高=盒子的高度,原因很好理解,行高= 上缝隙+文字高度+下缝隙 ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
html字居右垂直设置,css文字水平垂直居中怎么设置？
css文字水平垂直居中怎么设置?下面本篇文章就来给大家介绍使用CSS设置文字水平居中和垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.文字水平居中在CSS中想要 ...
利用vertical-align实现图片文字垂直居中对齐（HTML、CSS）
利用vertical-align实现图片文字垂直居中对齐(HTML.CSS) <!DOCTYPE html> <html lang="en"><hea ...
文字垂直居中（HTML、CSS）
文字垂直居中(HTML.CSS) 要使文字居中即将文字行高等于盒子高度即可实现 <!DOCTYPE html> <html lang="en"><h ...

【css】文字垂直居中

前言

方法1：容器高度不固定

方法2：容器高度固定

方法3：flex布局

【css】文字垂直居中相关推荐

最新文章

热门文章