css垂直居中

最新推荐文章于 2024-09-24 17:14:12 发布
转载 最新推荐文章于 2024-09-24 17:14:12 发布 · 221 阅读 · 0
文章标签：

#css垂直居中



第一种：inline 元素
  • inline 元素的等内边距，上下两边的内边距相等，则中间内容居中，demo 传送门：codepen.io/StevenYuysy/<img src="https://pic1.zhimg.com/50/1089bd28a59bfffdb09aeaf1c3d43e8c_hd.jpg" data-rawwidth="422" data-rawheight="279" class="origin_image zh-lightbox-thumb" width="422" data-original="https://pic1.zhimg.com/1089bd28a59bfffdb09aeaf1c3d43e8c_r.jpg">

  • inline 元素的行高，行高与容器高度相等，则中间内容居中，demo 传送门：codepen.io/StevenYuysy/<img src="https://pic1.zhimg.com/50/69ad247cebcdfb6105fb225079d8c350_hd.jpg" data-rawwidth="437" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="437" data-original="https://pic1.zhimg.com/69ad247cebcdfb6105fb225079d8c350_r.jpg">

  • 如果上面的代码都不生效的话，有可能行内元素是在表格里面，这个时候可以利用inline元素的 CSS 属性 vertical-align ，默认是 baseline 属性，将其设置为 middle，这个属性常用于 inline-level 和 table-cell 的元素。 demo传送门：inline_vertical_demo_3<img src="https://pic3.zhimg.com/50/274ea3309217321ab5e8ae35b8022eb0_hd.jpg" data-rawwidth="429" data-rawheight="338" class="origin_image zh-lightbox-thumb" width="429" data-original="https://pic3.zhimg.com/274ea3309217321ab5e8ae35b8022eb0_r.jpg">

第二种：block 元素
  • block 元素利用绝对定位以及负外边距，适用于知道元素的宽度和高度，兼容性好，所以会看到很多远古时代的居中都采用这种办法，参照下图，注意这里的外边距减去的是 block 元素宽度的一半，即
    margin:-（width/2） px
    <img src="https://pic1.zhimg.com/50/6732c0281c722dcb0208716a0df24db3_hd.jpg" data-rawwidth="518" data-rawheight="299" class="origin_image zh-lightbox-thumb" width="518" data-original="https://pic1.zhimg.com/6732c0281c722dcb0208716a0df24db3_r.jpg">
  • block 元素利用绝对定位以及 transform ，适用于不知道元素的宽度盒高度，参照下图 <img src="https://pic4.zhimg.com/50/21cc6a5443cd959f2e1c966bdd9aa79f_hd.jpg" data-rawwidth="511" data-rawheight="275" class="origin_image zh-lightbox-thumb" width="511" data-original="https://pic4.zhimg.com/21cc6a5443cd959f2e1c966bdd9aa79f_r.jpg">
  • block 元素在外部的容器，利用 flex 的属性将其设置为下图，则子元素 block 元素垂直居中<img src="https://pic4.zhimg.com/50/a310965198b80c8a23226e5cf3b46c07_hd.jpg" data-rawwidth="518" data-rawheight="188" class="origin_image zh-lightbox-thumb" width="518" data-original="https://pic4.zhimg.com/a310965198b80c8a23226e5cf3b46c07_r.jpg">

    水平垂直居中
    • 在垂直居中的基础上，block 元素的三种方法均能演变为水平垂直居中，前两种只需增加 left 属性以及 margin-left 或者 transformX 当中的一个属性达到目的
    • 利用 flex 的话，添加多一个 align-items:center 即可
    • 利用上面三种方法实现的水平居中 demo 传送门：
    • IFE task1_4_1
    • IFE task1_4_2
    • IFE task1_4_3
    参考文章
使用css实现div垂直居中的示例
09-25
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
CSS垂直居中实现方法大全
09-25
以下将详细解释文章中提到的五种CSS垂直居中的实现方法： 1. **line-height**： 这种方法适用于单行文本或者内联元素的垂直居中。通过将`line-height`属性设置为与容器高度相同的值，可以使得内容在垂直方向上居中...
css图片垂直居中
04-03
NULL 博文链接：https://gucaihe.iteye.com/blog/1465144
css - 垂直居中
火星男孩的分享空间
02-08 554
参考： CSS常见布局及解决方案 把简单做好也不简单-css水平垂直居中 单行文本垂直居中 需要满足两个条件： 1.元素内容是单行，并且其高度是固定不变的。 2.将其line-height设置成和height的值一样 <div><span>这是一段文字</span></div> div{ width: 400px; h...
CSS垂直居中的另类实现代码详解(不走寻常路)
11-19
在CSS布局中，垂直居中是一项常见的需求，但实现方式多种多样，各有优劣。本文主要探讨一种不常被使用的技巧，即通过伪元素`:before`搭配`vertical-align: middle`来实现元素的垂直居中。这种方法适用于某些特定场景...
CSS垂直居中的11种实现方式
weixin_33759269的博客
12-19 303
注：以下demo都只是针对现代浏览器所做，未兼容低版本的IE以及其它非主流浏览器。 11种实现方式分别如下： 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码： <div id="box"> <div id="child">我是测试DIV</div> </div> css代码： #box ...
CSS实现垂直居中
m0_57195882的博客
06-25 265
居中可分为垂直居中和水平居中，水平居中直接设置元素margin: 0 auto就可以实现。 首先在一个页面上写一个div，定义宽高为200px，背景颜色为蓝色： 要实现div的水平居中可直接在div中设置margin: 0 auto; 而垂直居中则相对复杂，在实现垂直居中之前要先把div的祖先元素html和body的宽高设置为100%，因为他们默认的是0，所以要清除样式，即把margin和padding都设置为0。 然后需要让div上下移动，一般top属性可以使得...
CSS 设置垂直居中
热门推荐
卿本无忧的博客
09-29 3万+
CSS 设置垂直居中
CSS垂直水平居中
刺心的博客
05-07 166
列出两种写法： 1.父元素规定子元素内容垂直居中 display: flex; align-items: center; justify-content: center; 2.子元素自己垂直水平居中 position:relative; left: 50%; top: 50%; transform:translate(-50%,-50%);
CSS 中的垂直居中法
weixin_31993501的博客
01-31 970
Blog 原文链接 我们都清楚元素相对其父级元素水平居中展示的方法：对于inline 的元素，我们都会想到为其父级元素设置tex-align : center。对于block 元素，我们会设定其 margin: 0px auto。 然而，垂直居中的实现方法，并没有这么简单，以下列出 6 种垂直居中法。 参考文章：6 Methods For Vertical Centering With ...
css 垂直居中_老生常谈之css垂直居中
weixin_39535287的博客
11-21 172
在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 text-align:center; 如果它是一个块级元素，就对它自身应用 margin:auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。长久以来，为了解决这一绝世难题，前端开发者们殚精竭虑，琢磨出了各种解决方法，可惜大多数并不实用。在本篇攻略中，我们将探索现代 CSS 的强大威力，...
CSS让元素垂直居中
xueyoubangbang的博客
05-23 761
问题： 布局如下 <div class="head" style="background-color: chartreuse"> //大的div <div class="logo" style="background-color: darkblue"> //小的div <a href="http://www.baidu...
2024 年 CSS 终于增加了垂直居中特性，效率翻倍！
zhudapeng929的博客
09-24 859
在 2024 年的Chrome 123 版本中， CSS 原生可以使用进行垂直居中。
css 垂直居中技巧
pwt_ymyg的博客
02-12 248
css 垂直居中技巧 CSS垂直居中技巧，我只会23个，你会几个？自古以来(是有多?~)，网页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的垂直居中技巧当成面试题，其重要性可见一斑，经过了Amos通灵了一下之后把垂直居中的写法扩展到了23种，今天就让Amos带着大家轻松的...
CSS垂直居中
最新发布
04-10
### CSS 实现元素垂直居中的方法 以下是几种常见的实现元素垂直居中的方法： #### 方法一：使用 `margin: auto` 和固定高度 通过设置父容器的高度以及子元素的绝对定位，再利用自动外边距来完成垂直居中。这种方法适用于已知高度的情况。 ```css .parent { position: relative; height: 200px; /* 设置固定的父容器高度 */ } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; /* 子元素宽度 */ height: 50px; /* 子元素高度 */ } ``` 此方法依赖于明确指定的宽高属性[^1]。 --- #### 方法二：使用 Flexbox 布局 Flexbox 是一种强大的布局工具，能够轻松实现垂直居中效果。只需在父容器上定义 `display: flex` 并配合 `align-items: center` 即可。 ```css .parent { display: flex; align-items: center; /* 垂直居中 */ height: 200px; /* 父容器高度 */ } .child { width: 100px; /* 子元素宽度 */ height: 50px; /* 子元素高度 */ } ``` 这种方式无需关心子元素的具体尺寸，适应性强[^2]。 --- #### 方法三：使用 Grid 布局 CSS Grid 提供了一种更现代化的方式来进行二维布局。可以通过简单的几行代码让子元素在其父容器内垂直居中。 ```css .parent { display: grid; place-items: center; /* 同时实现了水平和垂直居中 */ height: 200px; /* 父容器高度 */ } .child { width: 100px; /* 子元素宽度 */ height: 50px; /* 子元素高度 */ } ``` Grid 的优势在于其简洁性和灵活性，尤其适合复杂的多维布局场景。 --- #### 方法四：使用表格单元格模拟法 通过将父容器设为表格显示模式 (`display: table`)，并使子元素成为表格单元格 (`display: table-cell`) 来达到垂直居中的目的。 ```css .parent { display: table; height: 200px; /* 父容器高度 */ } .child { display: table-cell; vertical-align: middle; /* 垂直居中 */ width: 100px; /* 子元素宽度 */ height: 50px; /* 子元素高度 */ } ``` 该方法兼容性较好，但在现代开发中较少被推荐[^1]。 --- #### 方法五：使用 transform 属性 借助相对定位与变换函数也可以巧妙地解决垂直居中的需求。 ```css .parent { position: relative; height: 200px; /* 父容器高度 */ } .child { position: absolute; top: 50%; left: 50%; /* 如果仅需垂直居中，则忽略左偏移部分 */ transform: translate(-50%, -50%); /* 调整至中心点 */ width: 100px; /* 子元素宽度 */ height: 50px; /* 子元素高度 */ } ``` 这种技术灵活高效，在动态调整大小的情况下表现尤为出色[^1]。 --- ### 总结 以上列举了几种主流的 CSS 技巧用于处理不同情境下的垂直居中问题。每种方式各有优劣，开发者应依据实际项目需求选取最适合的技术方案。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值