1. 水平居中：给 div 设置一个宽度，然后添加 margin:0auto 属性
div {
width: 200px;
margin: 0auto;
}
2. 水平居中，利用 text-align:center 实现
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
3. 让绝对定位的 div 居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}
确定容器的宽高宽 500 高 300 的层设置层的外边距
div{
position:absolute; /*绝对定位 */
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px 00 -250px; /*外边距为自身宽高的一半*/
background-color:pink; /*方便看效果*/
}
/*未知容器的宽高，利用transform属性
div {
position: absolute; /*相对定位或绝对定位均可*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /*方便看效果*/
}
/利用 flex 布局实际使用时应考虑兼容性/
.container {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.containerdiv {
width: 100px;
height: 100px;
background-color: pink; /*方便看效果*/
}
/利用 text-align:center 和 vertical-align:middle 属性/
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container::after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
white-space: normal;
vertical-align: middle;
}
总结：
一般常见的几种居中的方法有：
对于宽高固定的元素
对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。
文章浏览阅读660次，点赞10次，收藏10次。mysqldump命令将数据库中的数据备份成一个文本文件，表的结构和数据将存储在生成的文本文件中。将备份出来的数据还原到某个数据库中。备份一个数据库下的多个表。MySQL自动备份脚本。也可以登入数据之后进行。_mysqldump 脚本
文章浏览阅读1.1k次。学小编逛贴吧发现一个热帖，就凑了凑热闹~~~看到这样一个帖。一程序员说自己刚写完代码，就别公司老板给开除了。为什么会这样的呢？原来是这位程序员写了一段这样的代码：public static Date getNextDay() {try {Thread.sleep(246060*1000);} catch (InterruptrdException e) {e.printStackTr..._程序员需求写不出来被开除
文章浏览阅读970次。在9.0的系统产品开发中，对于在SystemUI的原生系统中默认只有三键导航，想添加其他虚拟按键就需要先在构建导航栏的相关布局中分析结构，然后添加相关的图标xml就可以了，然后添加对应的点击事件，就可以了，接下来先分析第三步关于导航栏的相关布局情况然后实现虚拟按键的点击事件功能_android 导航栏 增加按钮
文章浏览阅读968次，点赞15次，收藏30次。Java里已内置4种常用的线程池（即 已经配置好核心参数），下面会详细说明。
文章浏览阅读1.9k次。Android系统是一个相对开放的系统，在我们平常开发的时候有时候会直接使用原生的控件更换下背景图片。如果想让我们的APP变得大漂亮，那么我们会对UI进行深度定制，变成我们所希望的那样。而一个APP的大漂亮除了UI的漂亮，很多时候字体也是影响大漂亮的因素之一。最近在开发中就有客户的需求是数字要显示为那种液晶仪表盘的那种方正一些的样子。OMG，可难为死我了。试了下Android自带的字体库，支持三种字体:Sans、serif、monospace，然后试了下。格劳资滴，看不出太明显的变化嘛，更别说要满足客户的_android 漂亮字库
文章浏览阅读4w次，点赞289次，收藏2.5k次。1. 操作系统的定义OS是一组控制和管理计算机硬件和软件资源，合理地对各类作业进行调度，方便用户使用计算机的程序集合。即为用户程序提供服务，是用户与硬件系统之间的接口。2. 操作系统的作用OS是计算机系统的核心，负责管理整个计算机系统的软硬件资源，制定各种资源的分配策略，调度系统中运行的用户程序，协调用户对资源的需求，从而使真个计算机系统高效有序的工作3. 操作系统的常见的分类①批处理操作系统：单道批处理（自动、顺序and单道性），多道批处理（宏观上并行，微观上串行，资源利用率高系统吞吐量大；用户响应时间长_操作系统期末复习
文章浏览阅读26次。用户可以在首页访问小学生课外知识学习网站方面信息，首页上面有导航栏，导航栏上面有课外知识，试卷列表，学习资讯，个人中心，后台管理等，点击导航栏课外知识可以看到很多信息，点击某个信息可以查看对应详情信息，用户登录后可以对小学生课外知识学习网站文章信息进行评论操作。管理员可以对课外知识进行添加，查询，修改，删除操作。下图就是课外知识管理页面。管理员可以对知识分类信息进行删除，查询和修改操作。前端技术：JavaScript、VUE.js（2.X）、css3。数据库管理工具：Navicat或sqlyog。
文章浏览阅读1.7w次，点赞3次，收藏9次。转自：https://www.cnblogs.com/zhishuai/p/7942273.htmljetbrains goland 跳到上一个光标处查了下是 ：Ctrl + Alt + 左右 mac下面是：Command+ Alt + 左右键但是我用下来是切上面打开文档页摸索了下是：Ctrl +Win+ Alt + 左右 我的键的映射是Default 。另外jb确实也..._goland进入ctrl+b函数后,什么快捷键返回上一个函数
文章浏览阅读4.6k次，点赞3次，收藏14次。用python3操作word文档，实现：word文档中表格的操作-单元格文字居中，字体颜色等的设置。python设置文档字体，python设置文档字体颜色，python设置单元格文字居中。_doc.tables[0].cell(a, b).vertical_alignment = wd_align_vertical.center # 垂
文章浏览阅读231次。Ubuntu系统使用技巧： Ctrl+alt+t: 打开终端 Ctrl+L:清理屏幕 Tab: 自动补全 up/down: 调出命令执行记录 Ctrl+Alt+方向键：切换工作区 Alt+Tab: 切换任务重定向、管道、通配符:重定向：就是把命令的执行结果写入到文件中 cmd > filename 把命令的执行结果以清空的方式写入到文件中(先清空再写入) cmd >> filename 把命令的执行结果以追加的方式写入到文件中管道：_ubuntu系统vim操作
文章浏览阅读420次，点赞3次，收藏8次。123。
文章浏览阅读1k次。指令概述：指令：英文单词，描述了一种简单的功能操作，如获取焦点；简单的DOM操作在Vue中统一的被封装成指令进行操作；什么是指令：包含了简单的DOM操作功能的组件！Vue中提供了自己的内建指令（掌握）、根据实际情况自定义指令（了解）Vue中的指令都是： 固定语法格式一、v-text指令指令名称：文本渲染指令指令描述：输出指令对应表达式的数据，即使数据中包含了标签，不会进行编译解释直接原样输出二、v-html指令名称：超文本/富文本渲染指令指令描述：输出指令对应表达式的数据，数据中一旦包含，会进行渲染解_在vue中,可以通过____语法将数据输出到页面中。