CSS垂直居中

最新推荐文章于 2023-08-11 23:03:45 发布
最新推荐文章于 2023-08-11 23:03:45 发布
阅读量509 收藏 1
点赞数
分类专栏： WEB 文章标签： css 垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jicemoon/article/details/50920427
版权

这里主要说了四种垂直居中的方法

  1. 设置line-height和height为相同的值;
  2. 利用table-cell并设置vertical-align;
  3. 利用position设置;
  4. 利用position:absolute和css3 transform属性就行居中;

另外还有一种是利用padding-top和padding-bottom, 这种写法, 就不贴代码了
下面一一介绍

首先说一下上述第一种(line-height)

下面是对应的css样式;

div.wrap.lh {
  height: 200px;
  line-height: 200px;
  overflow: hidden;
  background-color: #ffccff;
  /*用于水平居中**/
  text-align: center;
}
/*如果内含图片, 并需要图片也居中, 请加上此句样式**/
div.wrap.lh img{
  vertical-align: middle;
}

对应的测试html

<div class="wrap lh">
    开上缴<span style="color:red;">费卡</span>就是快机费<img src="../content-test/0.jpg" alt=""/>
</div>

注: 此种写法, 只适合用于内容为单行并且都是行内元素, 当内容出现块元素就不适用了

利用table-cell并设置vertical-align

样式如下

div.wrap.table {
  display: table;
  height: 300px;
}
div.wrap.table > * {
  vertical-align: middle;
  display: table-cell;
  /**下面非必须, 为了样式好看才加的**/
  border: 1px solid #ff0099;
  background-color: #ffccff;
  padding: 0 20px;
}
/**下面非必须, 为了样式好看才加的**/
div.wrap.table > * + * {
  border-left: none;
}

对应测试html

<div class="wrap table">
  <div>现在我们要使这段文字垂直居中显示！</div>
  <div>
    <pre>
      div.table-wrap{
        display: table;
        height: 60px;
      }
      div.table-wrap *{
        vertical-align: middle;
        display: table-cell;
        border: 1px solid #ff0099;
        background-color: #ffccff;
      }
    </pre>
  </div>
  <div>
    <img src="../content-test/0.jpg" alt=""/>
  </div>
</div>

注: 此种写法, 只适合用于IE8以上的版本, IE6/7不支持display:table这样的样式, 所以没办法支持这种写法

利用position设置

CSS及HTML如下

div.wrap.pos {
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  width: 760px;
  height: 200px;
  position: relative;
}
div.wrap.pos .sub {
  position: absolute;
  border: 1px solid #000;
  top: 50%;
}
div.wrap.pos .sub .content {
  border: 1px solid #ff6600;
  position: relative;
  top: -50%;
}
<div class="wrap pos">
  <div class="sub">
    <div class="content">深刻的发就是开的房间卡死金风科技奥<br/>斯卡放假额我开房间看到积分卡圣诞节</div>
  </div>
</div>

注: 此种写法, 只适合用于IE6/7, 其他标准浏览器均不支持此种写法

利用position:absolute和css3 transform属性就行居中
div.wrap.trans {
  position: relative;
  height: 300px;
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  width: 760px;
}
div.wrap.trans .content {
  position: absolute;
  /*水平-垂直居中*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="wrap trans">
  <div class="content">
    深刻的发就是开的房间卡死金风科技奥
    <p>斯卡放假额我开房间看到积分卡圣诞节</p>
    <img src="../content-test/0.jpg" alt=""/>
  </div>
</div>

注: 此种写法, 只适合用于标准浏览器和IE9+, 即支持transform/translate属性的浏览器

下面整合上述二/三两种写法, 组合一种适合所有主流浏览器的写法

代码如下

div.wrap.table_pos {
  display: table;
  *position: relative;
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  width: 760px;
  height: 200px;
}
div.wrap.table_pos .sub {
  display: table-cell;
  vertical-align: middle;
  *position: absolute;
  *top: 50%;
}
div.wrap.table_pos .sub .content {
  *position: relative;
  *top: -50%;
}
<div class="wrap table_pos">
  <div class="sub">
    <div class="content">
      深刻的发就是开的房间卡死金风科技奥
      <p>斯卡放假额我开房间看到积分卡圣诞节</p>
      <img src="../content-test/0.jpg" alt=""/>
    </div>
  </div>
</div>

注: 此种写法, 支持IE6+/FF/Chrome/Opera/Safari等所有主流浏览器

最后贴出上述所有写法的测试代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      /*line-height=height ==> 单行&&行内元素**/
      div.wrap {
        margin-bottom: 15px;
      }
      div.wrap.lh {
        height: 200px;
        line-height: 200px;
        overflow: hidden;
        background-color: #ffccff;
        text-align: center;
      }
      img{
        vertical-align: middle;
      }
      /**display: table ==> ie8+ **/
      div.wrap.table {
        display: table;
        height: 300px;
      }
      div.wrap.table > * {
        vertical-align: middle;
        display: table-cell;
        border: 1px solid #ff0099;
        background-color: #ffccff;
        padding: 0 20px;
      }
      div.wrap.table > * + * {
        border-left: none;
      }
      /***position ==> IE7(包括IE7)以下***/
      div.wrap.pos {
        border: 1px solid #FF0099;
        background-color: #FFCCFF;
        width: 760px;
        height: 200px;
        position: relative;
      }
      div.wrap.pos .sub {
        position: absolute;
        border: 1px solid #000;
        top: 50%;
      }
      div.wrap.pos .sub .content {
        border: 1px solid #ff6600;
        position: relative;
        top: -50%;
      }
      /**结合上面两种, 支持IE6+/FF/Chrome/Opera/Safari**/
      div.wrap.table_pos {
        display: table;
        *position: relative;
        border: 1px solid #FF0099;
        background-color: #FFCCFF;
        width: 760px;
        height: 200px;
      }
      div.wrap.table_pos .sub {
        display: table-cell;
        vertical-align: middle;
        *position: absolute;
        *top: 50%;
      }
      div.wrap.table_pos .sub .content {
        *position: relative;
        *top: -50%;
      }
      /**CSS3-transform ==> IE9+(支持transform属性的浏览器)**/
      div.wrap.trans {
        position: relative;
        height: 300px;
        border: 1px solid #FF0099;
        background-color: #FFCCFF;
        width: 760px;
      }
      div.wrap.trans .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="wrap lh">啊开始的房间卡上缴<span style="color:red;">费卡</span>就是快递放假啊快速减肥卡刷卡积分卡手机费<img src="../content-test/0.jpg" alt=""/></div>
    <div class="wrap table">
      <div>现在我们要使这段文字垂直居中显示！</div>
      <div>
        <pre>
          div.table-wrap{
            display: table;
            height: 60px;
          }
          div.table-wrap *{
            vertical-align: middle;
            display: table-cell;
            border: 1px solid #ff0099;
            background-color: #ffccff;
          }
        </pre>
      </div>
      <div>
        <img src="../content-test/0.jpg" alt=""/>
      </div>
    </div>
    <div class="wrap pos">
      <div class="sub">
        <div class="content">深刻的发就是开的房间卡死金风科技奥<br/>斯卡放假额我开房间看到积分卡圣诞节</div>
      </div>
    </div>
    <div class="wrap table_pos">
      <div class="sub">
        <div class="content">
          深刻的发就是开的房间卡死金风科技奥
          <p>斯卡放假额我开房间看到积分卡圣诞节</p>
          <img src="../content-test/0.jpg" alt=""/>
        </div>
      </div>
    </div>
    <div class="wrap trans">
      <div class="content">
        深刻的发就是开的房间卡死金风科技奥
        <p>斯卡放假额我开房间看到积分卡圣诞节</p>
        <img src="../content-test/0.jpg" alt=""/>
      </div>
    </div>
  </body>
</html>
jicemoon
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS垂直居中实现方法大全
09-25
以下将详细解释文章中提到的五种CSS垂直居中的实现方法： 1. **line-height**： 这种方法适用于单行文本或者内联元素的垂直居中。通过将`line-height`属性设置为与容器高度相同的值，可以使得内容在垂直方向上居中...
css 垂直居中的几种实现方法
09-25
以上是几种常见的CSS垂直居中方法。在实际项目中，开发者需要根据浏览器兼容性需求和元素的具体情况选择合适的方法。随着浏览器更新迭代，现代浏览器对CSS新特性的支持越来越好，使用`display: flex`或`grid`布局也...
CSS垂直居中的几种方法
m0_72838183的博客
10-04 7474
推荐大家几种常见的css垂直居中的方法，便于不同的场景使用，也方便大家面试时有更多的思路，如果大家有更好更多的方法，欢迎留言讨论
【前端】CSS垂直居中的7种方法
最新发布
karshey的博客
08-11 1303
因此，如果我要让box在wrapper里面垂直居中，我可以在wrapper的div里面加一个div。vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的。样式，那么box就可以在div里面垂直居中了。相对于该元素所在行的基线的垂直对齐。，同样的给box一个。
CSS 设置垂直居中
卿本无忧的博客
09-29 3万+
CSS 设置垂直居中
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
使用 CSS 实现垂直居中的8种方法
热门推荐
秋天，黄叶坠地，凉风有信。
03-25 10万+
​​​​​​CSS垂直居中的8种方法 目录 ​​​​​​CSS垂直居中的8种方法 1、通过verticle-align:middle实现CSS垂直居中。 2、通过display:flex实现CSS垂直居中。 3、通过伪元素:before实现CSS垂直居中。 4、通过display:table-cell实现CSS垂直居中。 5、通过隐藏节点实现CSS垂直居中。 6、已知父元素高度通过transform实现CSS垂直居中。 7、到垂直居中的位置。 8、通过line-height实现...
CSS垂直居中方法
weixin_44744746的博客
07-11 433
CSS实现垂直居中的方法
前端面试常考 | CSS垂直居中解决方案
云创网络工作室官方账号
12-04 755
CSS垂直居中方案
css垂直居中的6种方式
weixin_42974827的博客
09-08 1万+
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue版本大屏可视化解决方案。敬请期待吧~~~❤️。
CSS垂直居中img
laoli360的博客
09-16 470
img{ display:table-cell; text-align:center; vertical-align:middle; } 也可以将img 定位块级元素 然后按照之前发的帖子提及的六种方法来进行居中. ...
CSS 垂直居中
zhang6223284的博客
08-30 5245
前言 被这个问题折磨很久了，一直没有系统的整理，今天就系统的整理一下比较常用的，以后回顾的时候也可以参照 1. line-height 适用场景：单行文字，下拉框，按钮等 原理：将单行文字设置行高以后，文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度一样。 示例如下 &lt;style&gt; .content{ ...
使用css实现div垂直居中的示例
09-25
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
CSS 垂直居中五种实现方法
09-25
在CSS布局设计中，垂直居中是一个常见的需求，但实现起来并不总是那么简单，尤其是在兼容不同浏览器之间。这里我们将深入探讨五种不同的CSS方法来实现垂直居中，分析它们的优缺点，帮助你根据项目需求选择最合适的...
CSS垂直居中的另类实现代码详解(不走寻常路)
11-19
在CSS布局中，垂直居中是一项常见的需求，但实现方式多种多样，各有优劣。本文主要探讨一种不常被使用的技巧，即通过伪元素`:before`搭配`vertical-align: middle`来实现元素的垂直居中。这种方法适用于某些特定场景...
23种CSS垂直居中技巧
09-22
本文给大家分享23中css垂直居中的处理方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
CSS 垂直居中的5种实现方法
09-27
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面...
div+css垂直居中的五种实现方法
09-25
本文将介绍五种使用 `div` 和 `css` 实现垂直居中的方法，以帮助开发者解决这一问题。 方法一：表格布局 这种方法利用 `display: table`、`display: table-row` 和 `display: table-cell` 来模拟表格布局，并通过 `...
完美实现CSS垂直居中的11种方法
10-15
实现CSS垂直居中是前端开发中的一个重要知识点，它能够让页面布局更加美观合理。本文将详细介绍11种实现CSS垂直居中的方法，并对每种方法进行详细解析。 1. 使用绝对定位和负外边距进行垂直居中 这种方法适用于块级...
css垂直居中
05-30
实现 CSS 垂直居中有多种方式，以下是其中的几种方法： 1. 使用 flex 布局： ```css .container { display: flex; align-items: center; } ``` 2. 使用 table 布局： ```css .container { display: table; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值