CSS将div内容垂直居中案例总结

2024-04-02 19:04:59 834人浏览泡泡鱼

摘要

一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; li

一、行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：


p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。

二、内边距（padding）法

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：


p { padding:20px 0; }

这段代码的效果和line-height法差不多。

三、模拟表格法

将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

html结构如下：


<div id="wrapper">
    <div id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </div>
</div>

CSS代码：


#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}
#cell{display:table-cell; vertical-align:middle;}

实现如图所示：

遗憾的是IE7及以下不支持。

四、css3的transfORM来实现

css代码如下：


.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

五：css3的box方法实现水平垂直居中

html代码：


<div class="center">
  <div class="text">
    <p>我是多行文字</p>
    <p>我是多行文字</p>
    <p>我是多行文字</p>
  </div>
</div>

css代码：


.center {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background:#000;
  color:#fff;
  margin: 20px auto;


  display: -WEBkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

结果如图：

六：flex布局（`2018/04/17补充`）

html代码：


<div class="flex">
    <div>
       <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
      <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
    </div>
</div>

CSS代码：


.flex{
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    text-align: justify;
    width:200px;
    height:200px;
    background: #000;
    margin:0 auto;
    color:#fff;
}

实现效果：

到此这篇关于CSS将div内容垂直居中案例总结的文章就介绍到这了,更多相关CSS将div内容垂直居中内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: CSS将div内容垂直居中案例总结

本文链接: https://www.lsjlt.com/news/132737.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

CSS将div内容垂直居中案例总结

一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; li...

99+

2022-11-12
div内容水平居中与div内容垂直居中的方法

本文小编为大家详细介绍“div内容水平居中与div内容垂直居中的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“div内容水平居中与div内容垂直居中的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢...

99+

2022-10-19
div内容水平居中与div内容垂直居中怎么实现

这篇文章主要讲解了“div内容水平居中与div内容垂直居中怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“div内容水平居中与div内容垂直居中怎么实...

99+

2022-10-19
CSS中怎么实现DIV容器垂直居中

CSS中怎么实现DIV容器垂直居中，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。DIV CSS教程：实现DIV容器垂直居中的方...

99+

2022-10-19
CSS怎么实现内容居中和垂直居中

今天小编给大家分享一下CSS怎么实现内容居中和垂直居中的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了...

99+

2022-10-19
css3中flex怎么实现div内容水平垂直居中

这篇文章给大家分享的是有关css3中flex怎么实现div内容水平垂直居中的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、flex-direction: （元素排列方向）※ flex-direction:row...

99+

2023-06-08
CSS怎么实现图片在div内垂直水平居中

这篇“CSS怎么实现图片在div内垂直水平居中”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇...

99+

2022-10-19
CSS在固定宽高的div内如何实现垂直居中

这篇文章将为大家详细讲解有关CSS在固定宽高的div内如何实现垂直居中，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。需求案例案例是这样的，一个外层div,高宽是固定的，但...

99+

2022-10-19
CSS布局中有关水平和垂直居中的方法总结

这篇文章主要介绍“CSS布局中有关水平和垂直居中的方法总结”，在日常操作中，相信很多人在CSS布局中有关水平和垂直居中的方法总结问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...

99+

2022-10-19
如何实现不定宽高div内图片垂直居中的css样式

这篇文章主要讲解了“如何实现不定宽高div内图片垂直居中的css样式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现不定宽高div内图片垂直居中的cs...

99+

2022-10-19