css垂直居中怎么设置

发布网友 发布时间：2022-04-22 10:42

我来回答

共6个回答

懂视网 时间：2022-04-06 11:56

垂直居中

1.单行内联元素垂直居中

<div id="box">
 <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
 height: 120px;
 line-height: 120px;
 border: 2px dashed #f69c55;
 }
</style>

2.多行内联元素垂直居中

①利用flex布局（flex）

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。

<div class="parent">
 <p>Dance like nobody is watching, code like everybody is. 
 Dance like nobody is watching, code like everybody is. 
 Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
 .parent { 
 height: 140px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 border: 2px dashed #f69c55;
 }
</style>

②利用表布局（table）

利用表布局的vertical-align: middle可以实现子元素的垂直居中

<div class="parent">
 <p class="child">The more technology you learn, the more you realize how little you know.
 The more technology you learn, the more you realize how little you know.
 The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
 .parent {
 display: table;
 height: 140px;
 border: 2px dashed #f69c55;
 }
 .child {
 display: table-cell;
 vertical-align: middle;
 }
</style>

3 块级元素垂直居中

①使用absolute+负margin(已知高度宽度)

通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。

<div class="parent">
 <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②使用absolute+transform

当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

<div class="parent">
 <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③使用flex+align-items

通过设置flex布局中的属性align-items，使子元素垂直居中。

<div class="parent">
 <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
 display:flex;
 align-items:center;
}

④使用table-cell+vertical-align

通过将父元素转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

<div class="parent">
 <div class="child">Demo</div>
</div>
<style>
 .parent {
 display: table-cell;
 vertical-align: middle;
 }
</style>

推荐学习：《前端视频》

热心网友 时间：2022-04-06 09:04

如下：

1、line-height属性使文字垂直居中。

2、使用绝对定位和负外边距对块级元素进行垂直居中(已知元素的高度)。

3、使用绝对定位和transform进行垂直居中（未知元素高度）。

4、使用flex布局。

介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

热心网友 时间：2022-04-06 10:22

css中有一个属性：line-height
如果文本p，span,div,title等
那么line-height的值到底等于多少居中呢；
line-height的值=元素值得1/2；
也就是说如果元素高度=100px;那么line-height的值必须=100px才能居中，如果是=200px，那么就是在最底下

热心网友 时间：2022-04-06 11:56

css中有一个属性：line-height
如果你的文本p，span,div,title等
那么line-height的值到底等于多少居中呢；
line-height的值=元素值得1/2；
也就是说如果元素高度=100px;那么line-height的值必须=100px才能居中，如果是=200px，那么就是在最底下

热心网友 时间：2022-04-06 13:48

line-height：盒子的高度

热心网友 时间：2022-04-06 15:56

看你是垂直同步什么了