整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

优雅的使用CSS实现文字居中显示

SS中文字居中显示的方式有以下五种:

使用text-align属性设置文本的对齐方式

将text-align属性值设置为center可以将文本居中显示。

.center {
  text-align: center;
}

使用vertical-align属性设置元素的垂直对齐方式

将vertical-align属性值设置为middle可以将文本垂直居中显示。

.center {
  vertical-align: middle;
}

使用line-height属性设置行高

将line-height属性值设置为比字体大小略大的值,可以使文本在容器中垂直居中显示。

.center {
  line-height: 20px;
}

使用display

display: flex属性将父元素设置为弹性布局,并使用align-items: center属性将子元素在交叉轴上居中对齐。

.center {
  display: flex;
  align-items: center;
}

使用position

position: absolute属性和transform: translateY(-50%)将子元素相对于其父元素垂直居中对齐。

// 父容器
.center {
  position: relative;
  height: 200px;
}

// 子容器
.center > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: 100px;
  width: 200px;
  background-color: #ccc;
}

以上就是CSS中文字居中显示的几种方式,根据实际需求选择合适的方式即可。

篇文章主要给大家介绍一下如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题。

1)单行文本的居中

主要实现css代码:

水平居中:text-align:center;

垂直居中:line-height:XXpx; /*line-height与元素的height的值一致*/

我们先来看这样一个例子,加入我们这里有一个div,宽度和高度为300px,背景颜色为黑色,然后在div中有一行简短文字,我们只需要使用line-height:200px;就可以实现文字的居中效果,具体的代码如下所示:

由上图可以看出我们实现了单行文字的垂直居中效果,但是很多时候我们的文字并不知道具体有多少,可能有一行,也可能有很多行,那么遇到多行文字的这种问题我们要如何处理呢。

2)多行文本的垂直居中

对于多行文本的垂直居中我们有很多种实现方式,我们这里逐个的来看一下;

1、使用display:table来实现

主要实现代码:

display: table使块状元素成为一个块级表格;

display: table-cell;子元素设置成表格单元格;

vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;

具体的html与css的代码就如下所示:

2、使用absolute与transform配合实现

主要实现代码:

position:absolute; 首先给文本绝对定位;

left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%,再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了。

具体的html与css的代码就如下所示:

3、使用flex实现

主要实现代码:

display: flex;设置 display 属性的值为 flex 将其定义为弹性容器

align-items: center;定义项目在交叉轴(纵轴)上如何对齐,垂直对齐居中

justify-content: center; 定义了项目在主轴上的对齐方式,水平对齐居中

具体的html与css的代码就如下所示:

好了,本篇文章就给大家说到这里,大家自己动手写一下看能不能写出一样的页面效果出来,也可以找一些类似的页面自己练习一下,有需要源码的可以直接私信【网站源码】即可。

每日金句:了解别人心里想什么,你才能得到自己想要的。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

中,是我们编码过程中最常见的,那么,我们平时常见的居中方式,下面一一罗列出来,有错误的地方,望码友多多包涵并加以矫正。

水平居中

1、多块级元素,设置display:inline-block;使之在一行排列,在父级样式里,设置text-align:center;就可以实现水平居中的效果

body {

text-align: center;

}

div{

width: 100px;

height: 100px;

border: 1px solid;

display: inline-block;

}

2、内联元素,利用text-align:center;可以实现块级元素内部的内联元素的水平居中

div {

border: 1px solid red;

width: 100px;

height: 100px;

text-align: center;

}

<div>

<span>块级元素中的行内元素的水平居中</span>

</div>

3、块级元素,通过把固定宽高的块级元素的margin-left和margin-right设置为auto,方可实现

div{

width: 100px;

height: 100px;

border: 1px solid;

margin: 0 auto;

}

<div></div>

4、利用弹性盒子(display: flex;)

给父级定宽定高,然后设置display: flex;以及justify-content: center;方可达到水平居中效果

body {

width: 500px;

height: 500px;

display: flex;

justify-content: center;

border: 1px solid red;

}

div {

width: 100px;

height: 100px;

border: 1px solid;

}

<body>

<div></div>

</body>

垂直居中

1、内联元素(单行)

通过设置元素的height和line-height,方可达到居中效果

2、多行元素,利用表布局(table)

通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align:enter;方可居中

3、弹性盒子(flex)

给父级设置display: flex;变成弹性盒子。

分两种,

(1),主轴方向为水平,直接设置 align-items: center;

(2),主轴方向为垂直,设置flex-direction: column;改变主轴方向,然后设置justify-content: center;

弹性盒模型主轴不同,居中的方式也不同,灵活应用。

4、固定宽高的块级元素

利用父相子绝的定位原理,实现垂直居中

position: absolute;

left: 50%;

top: 50%;

margin-left: (自身高度的一半);

5,未知宽高的块级元素

利用transform: translateY(-50%);方可实现

position: absolute;

top: 50%;

transform: translateY(-50%);

水平垂直方向的居中

1、固定宽高

通过margin平移整体宽高的一半,实现水平垂直居中

{

position: absolute;

width: 100px;

height: 100px;

border: 1px solid;

left: 50%;

top: 50%;

margin-top: -50px;

margin-left: -50px;

}

2、未知宽高

利用transform中的translate()属性实现

{

position: absolute;

border: 1px solid;

left: 50%;

top: 50%;

transform: translateY(-50%);

transform: translateX(-50%);

}

3、弹性盒子(flex)

通过display:flex,把父级变成弹性盒模型,利用align-items: center;justify-content: center;方可实现居中。

注意:弹性盒子容器中,多行项目的居中方式另加计算。

body {

border: 1px solid;

width: 300px;

height: 300px;

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

div {

border: 1px solid;

width: 100px;

height: 100px;

}

随着学习的不断深入,居中方式可以有很多种,我们要善于利用,更加明确什么情况下用怎样的居中方式。