CSS垂直水平居中

最新推荐文章于 2024-06-27 16:22:44 发布
最新推荐文章于 2024-06-27 16:22:44 发布
阅读量93 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjjlyjjl/article/details/79982253
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body >
<style type="text/css">
   body{
      /* width: 100%;
       height:1000px;
       background: #67b374;*/

   }
    .div1{ /* ，ie8及以下不支持 rgba */
        position: absolute;
        height: 50px;
        width: 50px;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #999;
    }
    .div2{
        height: 50%;
        width: 50%;
        margin: auto;
        /*position: fixed;*/
        position: absolute;
        background: aqua;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
 
</style>



<div class="div2">
    <div class="div1">
    </div>
</div>

<!--<div id="div4">

</div>-->

</body>

</html>

div1 ,div2 宽高都可以用百分比，优点是不用理会父元素大小，缺点  不支持 ie7及以下浏览器。

若 父元素 高度已知 ，可以通过 line-height 设置 垂直居中，再通过margin ，可以文本的 垂直水平居中



挥手功名
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 垂直水平居中的5种最佳解决方案
09-24
总的来说，CSS垂直水平居中有多种方法，每种都有其适用场景。理解这些方法并熟练运用，可以帮助开发者更好地应对各种布局挑战。在实际项目中，可以根据具体需求选择最适合的方法，或者结合多种方法以达到最佳效果。
css垂直水平居中6种方式
09-08
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue...
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 8659
css垂直水平居中方式
最全CSS垂直水平居中的方法（十二种）
热爱前端的大三在校生
07-27 3634
最全CSS垂直水平居中的方法，告别知识短板，拒绝一知半解
css元素水平垂直居中
博哥的二进制世界
06-03 1105
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
16种CSS水平垂直居中方法
热门推荐
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS设置水平垂直居中的方法（ 7种 ）
大剑师兰特的GIS世界
03-19 1464
CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中。
css实现水平垂直居中的方法
狗头苏丹的博客
06-08 199
水平垂直居中的方法：方法(1)通过margin属性，方法(2)通过padding属性，方法(3)“子绝父相”，方法(4)flex弹性盒子
CSS垂直水平居中的各种解决方法汇总
路漫漫其修远兮，吾将上下而求索。
02-22 1872
目录 CSS水平居中 文本水平居中 单个块级元素水平居中 多个水平排列的块级元素 水平居中 多个垂直排列的块级元素 水平居中 CSS垂直居中 单行文本垂直居中 多行文本垂直居中 方法1：使用table布局 方法2：设置vertical-align，line-height 方法3：使用flex布局 方法4：设置伪元素 块级元素垂直居中 方法1：flex布局 方法2：设置absol...
CSS常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
css垂直水平居中方式
宝剑锋从磨砺出
06-27 260
【代码】css垂直水平居中方式。
CSS垂直水平居中的各种解决方法汇总 (ฅ´ω`ฅ)已阅留爪
01-08
目录 CSS水平居中 文本水平居中 单个块级元素水平居中 多个水平排列的块级元素 水平居中 多个垂直排列的块级元素 水平居中 ...CSS垂直水平居中 方法1：设置absolute和margin 方法2：设置absolute和transf
CSS解决未知高度的垂直水平居中自适应问题
09-27
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
css 垂直水平居中
08-30
### 回答1： 使用 CSS 让元素垂直水平居中有多种方法。 使用 `position: absolute` 和 `transform: translate(-50%, -50%)...以上就是实现CSS垂直水平居中的几种常用方法，根据具体情况选择合适的方法来实现居中效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值