html文本居中代码(html让一段文字居中)

CSS 是前端里面的基础之一，也是非常重要的一部分，它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中，总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。

当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。此时就需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0。

HTML 代码

<div class="box"\n <div class="center1"</div\n</div

CSS 代码

.box{\n width: 200px;\n height: 200px;\n background-color: #eee;\n position: relative;\n margin-top: 20px;\n}\n.center1{\n width: 50px;\n height: 50px;\n background-color: #00ACED;\n margin: auto;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}

效果展示：

当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。但是，使用的同时还需要结合其他属性才完整实现。因为，单是设置 absolute，上左距离均为一半，就会出现下面这种情况。很显然可以看到，元素并不是完全居中，仅只有左上角的位置在中心点

因此想要实现元素完全水平垂直居中，在设置了 absolute 定位后，可以设置 margin 值为负，或者使用 calc 来计算，上左距离在 50% 的基础上还要减去元素本身一半的宽高。

margin 值为负或者 calc 计算均是在已知元素宽高的情况下，假设不知道元素的宽高，那么怎么实现水平垂直居中呢？这里就可以使用 transform 属性，通过坐标位移来实现居中。

CSS 代码

/* 结合 margin */\n.center2{\n width: 50px;\n height: 50px;\n background-color: #7FFFD4;\n position: absolute;\n left: 50%;\n top: 50%;\n margin-left: -25px;\n margin-top: -25px;\n}\n/* 结合 calc 计算*/\n.center2{\n width: 50px;\n height: 50px;\n background-color: #7FFFD4;\n position: absolute;\n left: calc(50% – 25px)\n top: calc(50% – 25px);\n}\n/* 结合 transform */\n.center2{\nwidth: 50px;\nheight: 50px;\nbackground-color: #7FFFD4;\nposition: absolute;\nleft: 50%;\ntop: 50%;\ntransform: translate(-50%, -50%);\n}

效果展示

03

PART

可以通过弹性布局来设置水平垂直居中，这里需要设置父级元素 display:flex; 还需要设置两个属性，水平布局 justify-content 以及垂直布局 align-items。

HTML代码

<div class="box2"\n <div class="center4"</div\n</div

CSS代码：

.box2{\n background-color: #eee;\n width: 200px;\n height: 200px;\n position: relative;\n margin-top: 20px ;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.center4{\n width: 50px;\n height: 50px;\n background-color: #B39873;\n}

效果展示：

前面介绍的是元素如何实现水平垂直居中，下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的，使用文本水平对齐 text-align 和行高 line-height 来实现的。

HTML 代码

<div class="box3"\n <div class="center5"文字居中</div\n</div

CSS 代码

.box3{\n background-color: #eee;\n width: 200px;\n height: 200px;\n margin-top: 20px;\n}\n.center5{\n text-align: center;\n line-height: 200px;\n}

效果展示

05

PART

第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现，一种对元素本身属性进行设置，另一种在元素的父级元素中设置。两者看上去内容似乎差不多，不同的是在元素中设置的是 align-self 还要多了一个 margin，父级元素中是 align-items。

相关代码：

/* grid 元素中设置 */\n.box4{\n background-color: #eee;\n width: 200px;\n height: 200px;\n margin-top: 20px;\n display: grid;\n}\n.center6{\n align-self: center;\n justify-content: center;\n margin: auto;\n}\n/* grid 父级元素中设置 */\n.box5{\n background-color: #eee;\n width: 200px;\n height: 200px;\n margin-top: 20px;\n display: grid;\n align-items: center;\n justify-content: center;\n}\n\n

效果展示：