1.用行高实现

实现思路：

将行高设置成与盒子高度一样的值，这样就可以把文字移到盒子的垂直中心了。

当高度一样的时候，它们的垂直中心就会在同一行，起点都会从垂直中心出发。

再设置水平居中的对齐方式，就能实现水平居中。

接下来，就能实现水平垂直居中的效果了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height:400px; background-color: green;border: 10px solid gray;line-height: 400px;text-align: center;}</style>
</head>
<body>    <div class="box">666</div>
</body>
</html>

2.用单元格实现

实现思路：

将盒子设置成table cell，也就是表格的列。

盒子变成表格之后，就可以设置单元格垂直居中了，也就是vertical-align: middle;

再设置文本对齐方式，就能实现一行内的文本居中。

接着，就会出现水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height:400px; background-color: green;border: 10px solid gray;display: table-cell;vertical-align: middle;text-align: center;}</style>
</head>
<body>    <div class="box">666</div>
</body>
</html>

3.用Flex布局实现

Flex是Flexible Box的缩写，意思是弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

justify-content属性 : 定义了项目在主轴上的对齐方式。简单来说是坐标轴的x轴，采用横向的排列方式。

align-items属性 : 定义项目在交叉轴上如何对齐。简单来说是坐标轴的y轴，采用纵轴的排列方式。

参考网址：https://www.runoob.com/w3cnote/flex-grammar.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height:400px; background-color: green;border: 10px solid gray;display: flex;justify-content: center;align-items: center;}</style>
</head>
<body>    <div class="box">666</div>
</body>
</html>

css实现文字的水平垂直居中相关推荐

文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
CSS display: table-cell 用于水平垂直居中
CSS display: table-cell 用于水平垂直居中在 CSS 设置居中时候,水平和垂直居中的设置略有不同,通常我们使用 text-align:center 对图片.文字等行内元素(in ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
css grid布局实现水平垂直居中文字水平垂直居中
原来一直使用flex布局来实现水平垂直居中,今天才知道还有grid也是很好用的,参考阮一峰大神的博客,简单记录一下学习: <div class="container"> ...
大小不固定的图片、多行文字的水平垂直居中
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想 ...
CSS中让元素水平垂直居中的6种写法
水平垂直居中水平居中水平垂直居中--flex布局 margin + position:absolute布局 transform + absolute absolute + margin负值 abs ...
CSS让一个元素水平垂直居中，到底有多少种方案？
CSS水平垂直居中的方案水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: (1)width和margin实现.margin: 0 auto; (2)绝对定位 ...
js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
css定位“十字架“之水平垂直居中
1.先看要实现的效果实际的效果图可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML P ...

css实现文字的水平垂直居中

文章目录

1.用行高实现

2.用单元格实现

3.用Flex布局实现

css实现文字的水平垂直居中相关推荐

最新文章

热门文章