css 垂直居中

素颜马尾好姑娘i 2022-03-16 09:05 344阅读 0赞

1、利用display：table和display：table-cell；vertical-align: middle;

<div style="width: 36px;height: 36px;background:rgba(187,187,187,1);display: table;text-align: center;">
        <span style="display: table-cell;vertical-align: middle;font-size: 14px;color: #fff;">sa</span>
    </div>

效果  
![在这里插入图片描述][20190227110538949.png]  
2、绝对定位的垂直方法（需要父元素position:relative）  
还缺少line-height设置

<div style="width: 36px;height: 36px;background:rgba(187,187,187,1);position: relative;">
        <span style="position: absolute;top: 50%;right: 50%;transform: translate(50%,-50%);">sa</span>
    <div>

效果  
![在这里插入图片描述][20190227111935862.png]  
仔细看好像span并没有垂直居中，把外层div的width和height设置成20px,则能发现没有垂直居中  
![在这里插入图片描述][2019022711203057.png]  
原因在于字母没有完全填充span的高度上面还有一部分空着，那怎么办？  
加入line-height属性

<div style="width: 36px;height: 36px;background:rgba(187,187,187,1);position: relative;">
        <span style="position: absolute;top: 50%;right: 50%;transform: translate(50%,-50%);line-height: 10px;">sa</span>
    </div>

## 3、line-height：外层父元素的高度 ##

<div style="width: 200px;height: 200px;background:rgba(187,187,187,1);">
        <div style="text-align: center;line-height: 200px;">你好</div>
    </div>

[20190227110538949.png]: /images/20220316/d052abe2f52549b69c009385927fa832.png
[20190227111935862.png]: /images/20220316/81a6914498384da69a1e6da1f76e1c01.png
[2019022711203057.png]: /images/20220316/b92783304a704026b7333a43359e7c93.png

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS垂直水平居中

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

快来打我*/ 2023年01月14日 12:58/ 0 赞/ 195 阅读

相关 CSS垂直居中

代码 position: fixed; left: calc(50% - 100rpx); top: calc(50% - 150rpx);

男娘i/ 2023年01月06日 11:55/ 0 赞/ 164 阅读

相关 css实现垂直居中

1、父元素高度确定的情况下通过transform实现垂直居中  <style> .box-wrap { background-co

谁践踏了优雅/ 2022年12月22日 04:47/ 0 赞/ 153 阅读

相关 css 垂直居中

垂直居中 1. 行内元素，可以设置line-height 与父级 height 相等 2. 设置 margin/padding 居中 3. flex 居中设置 a

╰半橙微兮°/ 2022年11月27日 10:13/ 0 赞/ 205 阅读

相关 [CSS]垂直水平居中

垂直水平居中两种实现方式： 1. .box{ width:200px; height: 200px; backgrou

约定不等于承诺〃/ 2022年11月26日 04:58/ 0 赞/ 316 阅读

相关 CSS水平垂直居中

在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

不念不忘少年蓝@/ 2022年11月12日 08:18/ 0 赞/ 337 阅读

相关 css垂直居中--div

面试到css的时候，人们经常会问给你一个div固定宽度. <!DOCTYPE html> <html lang="en"> <head> <

「爱情、让人受尽委屈。」/ 2022年07月15日 23:18/ 0 赞/ 310 阅读

相关 css 垂直居中

1、利用display：table和display：table-cell；vertical-align: middle; <div style="width: 36p

素颜马尾好姑娘i/ 2022年03月16日 09:05/ 0 赞/ 345 阅读

相关 css 垂直居中

css 垂直居中只需要一行代码。 line-height: 50px; 其中的50根据父div的height 决定，例如父div高度为50px；则line-he

浅浅的花香味﹌/ 2021年09月27日 09:40/ 0 赞/ 423 阅读

相关 CSS垂直居中

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加

心已赠人/ 2021年09月10日 16:26/ 0 赞/ 474 阅读