健康资讯 关于【div文字居中】，在编写HTML时，今天涌涌小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
- 内容导航：
- 1、在编写HTML时，怎样让DIV文字居中
- 2、「面试题」CSS 中几种最常用的水平垂直居中的方法
1、在编写HTML时，怎样让DIV文字居中
我们在HTML页面中编写DIV的时候，文字一般都默认对齐在DIV的左上角，那么怎么让DIV中的文字居中呢？下面小编给大家分享一下。
工具/材料
Sublime Text
操作方法
首先打开Sublime Text软件，新建一个HTML页面，如下图所示
然后我们在html页面中加入div标签，并且在div标签中加入一些文字，如下图所示
接下来我们给div标签编写CSS样式，如下图所示，这里主要是text-align和line-height两个属性，如下图所示
最后我们运行页面程序，你就会在页面中看到div中的文字水平垂直都居中了，如下图所示
2、「面试题」CSS 中几种最常用的水平垂直居中的方法
一、使用 margin:auto
当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。
此时就需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0。
<divclass="box"><divclass="center1"></div></div>.box{width:200px;height:200px;background-color:#eee;position:relative;margin-top:20px;}.center1{width:50px;height:50px;background-color:#00ACED;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;}
效果展示：
二、使用 position:absolute
当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。
但是，使用的同时还需要结合其他属性才完整实现。
因为，单是设置 absolute，上左距离均为一半，就会出现下面这种情况。
很显然可以看到，元素并不是完全居中，仅只有左上角的位置在中心点。
概念图：
因此想要实现元素完全水平垂直居中，在设置了 absolute 定位后，可以设置 margin 值为负，或者使用 calc 来计算，上左距离在 50% 的基础上还要减去元素本身一半的宽高。
margin 值为负或者 calc 计算均是在已知元素宽高的情况下，假设不知道元素的宽高，那么怎么实现水平垂直居中呢？这里就可以使用 transform 属性，通过坐标位移来实现居中。
.center2{width:50px;height:50px;background-color:#7FFFD4;position:absolute;left:50%;top:50%;margin-left:-25px;margin-top:-25px;}.center2{width:50px;height:50px;background-color:#7FFFD4;position:absolute;left:calc(50%-25px)top:calc(50%-25px);}.center2{width:50px;height:50px;background-color:#7FFFD4;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
效果展示：
三、使用弹性布局
可以通过弹性布局来设置水平垂直居中，这里需要设置父级元素 display:flex; 还需要设置两个属性，
水平布局 justify-content 以及垂直布局 align-items。
<divclass="box2"><divclass="center4"></div></div>.box2{background-color:#eee;width:200px;height:200px;position:relative;margin-top:20px;display:flex;justify-content:center;align-items:center;}.center4{width:50px;height:50px;background-color:#B39873;}
效果展示：
四、文本水平对齐和行高
前面介绍的是元素如何实现水平垂直居中，下面介绍的是如何将文字进行水平垂直居中。
这第一个方法也是最经常用的，使用文本水平对齐 text-align 和行高 line-height 来实现的。
<divclass="box3"><divclass="center5">文字居中</div></div>.box3{background-color:#eee;width:200px;height:200px;margin-top:20px;}.center5{text-align:center;line-height:200px;}
效果展示：
五、使用网格布局
第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现，一种对元素本身属性进行设置，另一种在元素的父级元素中设置。两者看上去内容似乎差不多，不同的是在元素中设置的是 align-self 还要多了一个 margin，父级元素中是 align-items。
.box4{background-color:#eee;width:200px;height:200px;margin-top:20px;display:grid;}.center6{align-self:center;justify-content:center;margin:auto;}.box5{background-color:#eee;width:200px;height:200px;margin-top:20px;display:grid;align-items:center;justify-content:center;}
效果展示：
本文关键词：div文字居中属性，div文字居中自适应,文字大小自适应，div文字居中怎么设置，div里面文字居中，div文字居中垂直。这就是关于《div文字居中，在编写HTML时（中几种最常用的水平垂直居中的方法）》的所有内容，希望对您能有所帮助！
