CSS 水平垂直居中

方法一:

容器确定宽高:知识点:transform只能设置在display为block的元素上。

<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#container{
width: 500px; /* 确定!*/
height: 300px;
background-color: pink;
}
#child{
width: 100px; /* 如果没有宽度,div充满容器,怎么水平居中 */
position: relative; /* 相对父容器进行定位,规定top left值 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 如果不设置这个,其实是子div的左上原点是水平垂直居中,这个translate百分比是自身的百分比*/
text-align: center; /* 里面的文字居中 */
}
</style>
</head>
<body>
<div id="container">
<div id="child">哈哈哈哈</div>
</div>
</body>

方法一效果图:

方法二:

 利用 flex 布局实际使用时应考虑兼容性,flex不兼容ie9
父容器高度没有设置,那么其高度就是子容器撑开的,也就没有垂直居中这一说,只需要水平居中即可。
 .container { display: flex; align-items: center;         /* 垂直居中 */ justify-content: center;    /* 水平居中 */} .container div { width: 100px; height: 100px; background-color: pink;        /* 方便看效果 */}  

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hji0a2j&title=CSS 水平垂直居中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux怎么进入文件夹_Linux基础命令《上》

上一节介绍了VMware中安装centos7以及克隆系统&#xff0c;之中用到的几个命名还都是开发不常用的&#xff0c;这节课就准备讲解一下入门的Linux命名&#xff0c;都是日常使用的。首先呢&#xff0c;我们进入系统后&#xff0c;得先知道我是谁&#xff0c;我在哪儿&#xff1f;…

UML学习(一)-----用例图

1、什么是用例图 用例图源于Jacobson的OOSE方法&#xff0c;用例图是需求分析的产物&#xff0c;描述了系统的参与者与系统进行交互的功能&#xff0c;是参与者所能观察和使用到的系统功能的模型图。它的主要目的就是帮助开发团队以一种可视化的方式理解系统的功能需求&#xf…

首款鸿蒙系统终端n,荣耀智慧屏正式发布,首款搭载鸿蒙系统终端,家庭C位新选择...

原标题&#xff1a;荣耀智慧屏正式发布&#xff0c;首款搭载鸿蒙系统终端&#xff0c;家庭C位新选择智能手机的普及率越来越高&#xff0c;其所能够承担的功能也越来越多&#xff0c;电视机对于很多中青年的用户来讲&#xff0c;更多的时候就是个摆设。在家庭中&#xff0c;看电…

oracle如何保证数据一致性和避免脏读

oracle通过undo保证一致性读和不发生脏读 1.不发生脏读2.一致性读3. 事务槽&#xff08;ITL&#xff09;小解1.不发生脏读 例如&#xff1a;用户A对表更新了&#xff0c;没有提交&#xff0c;用户B对进行查询&#xff0c;没有提交的更新不能出现在用户的查询结果中 举例并通个d…

Google Guava BloomFilter

当Guava项目发布版本11.0时&#xff0c;新添加的功能之一是BloomFilter类。 BloomFilter是唯一的数据结构&#xff0c;用于指示元素是否包含在集合中。 使BloomFilter有趣的是&#xff0c;它将指示元素是否绝对不包含或可能包含在集合中。 永远不会出现假阴性的特性使BloomFil…

php 编程祝新年快乐_用于测试自动化的7种编程语言

导读&#xff1a;本文重点介绍测试自动化中排名前七位的编程语言。当人们想要开始做自动化测试&#xff0c;此时却需要开发自动化测试脚本&#xff0c;也就是要学习一门编程语言。那么&#xff0c;我们怎样迈出这一步&#xff1f;也有你已经精通一种编程语言&#xff0c;也可以…

Vue.js开发环境搭建的介绍

包含了最基础的Vue.js的框架&#xff0c;包含了打包工具和测试工具&#xff0c;开发调试的最基本的服务器&#xff0c;不需要关注细节&#xff0c;只需关注Vuejs对项目的实现 npm在国内的网络使用较慢&#xff0c;所以推荐下载安装淘宝的镜像 1&#xff1a; 2&#xff1a;安装c…

html文件转换html格式,pdf文件怎么转换成html格式

PDF文件怎么转换成html格式呢&#xff1f;html格式其实就是网页格式&#xff0c;PDF文件和网页文件一般情况下是两种完全不搭边的格式&#xff0c;但是不可否定的是办公室的多样化总有人会有这样的需求&#xff0c;只要有需求就会有其相应的解决方案。我们可以利用PDF转Word一样…

Eclipse中的Github Gists

我想描述有关在Eclipse中集成GitHub Gists的简单步骤。 有几个来源促使我这样做&#xff1a; Eclipse的GitHub Mylyn连接器 EGit / GitHub /用户指南 http://eclipse.github.com 我一直在使用Eclipse Java EE发行版&#xff0c;其中已经安装了Mylyn插件&#xff1a; 1.通…

CSS3景深-perspective

3D视图正方体&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>CSS3景深-perspective</title>6 </head>7 <style>8 #div1{9 position: rel…

【BZOJ4262】Sum 单调栈+线段树

【BZOJ4262】Sum Description Input 第一行一个数 t&#xff0c;表示询问组数。第一行一个数 t&#xff0c;表示询问组数。接下来 t 行&#xff0c;每行四个数 l_1, r_1, l_2, r_2。Output 一共 t 行&#xff0c;每行一个数 Sum。Sample Input 4 1 3 5 7 2 4 6 8 1 1 9 9 9 9 1…

父类一实现serializable_我的java基础学习易错点和易忘点总结(一)

一.继承A:子类只能继承父类所有非私有的成员(成员方法和成员变量)B:子类不能继承父类的构造方法&#xff0c;但是可以通过super关键字去访问父类构造方法。二.继承中构造方法的关系A:子类中所有的构造方法默认都会访问父类中空参数的构造方法B:为什么呢?因为子类会继承父类中的…

深入克隆

在继续克隆概念之前&#xff0c;让我们用对象创建概念刷新基础知识。 使用new运算符创建对象时&#xff0c;对象将在堆中获取内存分配。 堆中的对象创建 在Java中&#xff0c;理想情况下仅通过引用变量修改对象&#xff0c;即仅复制对象的内存地址&#xff0c;因此原始对象中…

索引和未索引执行计划的比较_详解Oracle复合索引+实例说明

复合索引复合索引顾名思义&#xff0c;区别于单列索引&#xff0c;是由两个或多个列一起构成的索引。其在B树上的数据结构是什么样&#xff1f;如下图&#xff0c;是一个包含两列的复合索引。如果你观察仔细&#xff0c;还会发现它的叶子节点是ASC递增排序的。现根据第一个值排…

Datables使用总结

本文共四部分&#xff1a;官网 | 基本使用|遇到的问题|属性表 一&#xff1a;官方网站&#xff1a;[http://www.datatables.net/] 二&#xff1a;基本使用&#xff1a;[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { …

用方面清理代码

在我以前的文章中&#xff0c;我描述了字母转换&#xff0c;并且提到了我们使用AspectJ解决了该任务&#xff0c;但是我没有提及AspectJ的工作原理以及一般性的方面。 因此&#xff0c;在接下来的几行中&#xff0c;我将解释&#xff1a; 什么是面向方面的编程&#xff0c;为什…

原型 - 实现自己的jQuery

每个第一次使用jq的开发者都感到惊叹,jq的$太神奇了,究竟是怎么做到的使用$控制dom 赞叹前人之余,探究其本源才是前端开发者应该做的事,社区常常说,不要重复造轮子, 可是啊,连轮子都造不出来,又怎么去了解在什么环境下用什么轮子,怎么样才可以造成更加优秀的轮子, 不同阶段对…

server.transfer 无法跳转页面_H5 腾讯地图无法导航

uni-app 打包H5腾讯地图无法导航前言&#xff1a;最近几天用uni-app开发安卓和iOS应用&#xff0c;打包成APP安装包后&#xff0c;APP内做地图导航没有问题&#xff0c;APP内使用的是高德地图&#xff1b;但是打包成为H5页面后&#xff0c;运行在微信内置浏览器或者运行在第三方…

打破PermGen神话

在我的最新文章中&#xff0c;我解释了可能导致java.lang.OutOfMemoryError&#xff1a;PermGen空间崩溃的原因 。 现在该讨论该问题的可能解决方案了。 或者&#xff0c;更确切地说&#xff0c;是关于互联网对可能解决方案的建议。 不幸的是&#xff0c;我只能说&#xff0c;我…

android 弹出弹框2秒消失_基于HTML5 Canvas 实现弹出框

前言用户鼠标移入时&#xff0c;有弹出框出现&#xff0c;这样的需求很常见。这在处理 HTML 元素实现时简单&#xff0c;但是如果是对 HTML5 Canvas 构成的图形进行处理&#xff0c;这种方法不再适用&#xff0c;因为 Canvas 使用的是另外一套机制&#xff0c;无论在 Canvas 上…