javascript文字竖立 js文字居中怎么设置

文章目录

• 1.行内元素水平垂直居中
• 2.绝对定位 + margin（需要指定子元素的宽高）
• 3.绝对定位 + translate（无需指定子元素的宽高，推荐）
• 4.flex 布局
• 5.table-cell 布局

元素相对于上级元素进行定位，这在界面排版时相当重要，本文介绍元素相对于父元素水平垂直居中的方法。

1.行内元素水平垂直居中

方法一：文字水平垂直居中，父元素加上如下代码：

line-height:高度大小值;    /*垂直居中*/ 
text-align:center;    /*水平居中*/

特别注意，这种方式并不能让图片相对文字在单行中垂直居中。

方法二：图片相对文字在单行中垂直居中，在方 法一基础上加上如下代码

vertical-align: middle;     /*图片与文字垂直居中，但会有少量偏差，再通过*/ 
position:relative;  /*通过相对定位微调元素位置*/ 
top:2px;    /*微调位置大小*/

2.绝对定位 + margin（需要指定子元素的宽高）

方法一：给子元素加如下代码

position:absolute;
top:50%;  
margin-top:30px; /* -自身高度一半; */ 
left:50%;  
margin-left:30px; /*-自身宽度一半;*/;

不足之处：要求指定子元素的宽高，才能写出 margin-top 和 margin-left 的属性值。

方法二： 给子元素加上如下代码

position:absolute;
margin:auto;

不足之处：要求指定子元素的宽高，如果不指定宽高，子元素将占满父容器
特别注意，如果元素的宽高会随着内容发生变化，则以上两种方法都不能用，否则ok。

3.绝对定位 + translate（无需指定子元素的宽高，推荐）

这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。因为 translate() 中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的（动态计算宽高）。
给子元素加下如下代码：

position:absolute;       
top:50%;      
left:50%;
transform:translate(-50%,-50%);  /*向左和向上移动自身宽度一半*/

4.flex 布局

方法一：给父元素加上如上代码

display:flex; /*弹性布局*/
justify-content:center; /*子元素相对父元素水平（主轴）居中*/
align-items:center; /*子元素相对父元素垂直（交叉轴）居中*/

不足之处：父容器里的所有子元素们都垂直居中了。（如果父容器里有多个子元素的话，我们只想指定某个子元素居中，则可以用方法二。

方法二：给父元素和子元素分别加上如下代码

display:flex; /*给父元素加，弹性布局*/
margin:auto; /*给子元素加*/

5.table-cell 布局

display: table-cell;指让标签元素以表格单元格的形式呈现，使元素类似于td标签。

不过会被float, position: absolute等属性破坏效果，应避免同时使用。

同时margin值是没有任何意义的

应用一：内容整体水平垂直居中

应用二：不等高项水平垂直居中

在应用一的基础上，给子项（元素） 添加 vertical-align: middle; 就可以实现。

应用三：单个块级元素水平垂直居中

在这里插入图片描述