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;
}
总结：
一般常见的几种居中的方法有：
对于宽高固定的元素
对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。
文章浏览阅读5k次。用python可以很小巧轻便的实时监控日志文件增量刷新，根据某些关键字进行匹配，方便做运维异常告警代码import timeimport re# specify log file pathlog_path = "my.log"# open file and monitor newst linenumber = 0position = 0with open(log_path,..._linux实时监控日志 python
文章浏览阅读1.4w次，点赞12次，收藏61次。svn的分支管理_svn 分支
文章浏览阅读4.2w次，点赞329次，收藏2.7k次。Python 入门的60个基础练习_练习python基础语法
文章浏览阅读1w次。用Xcode5运行一下应用，第一个看到的就是status bar的变化。在iOS6中，status bar是系统在处理，应用_ios7 statusbar
文章浏览阅读2.1k次。问题描述：，在gdb调试程序输出变量：p var，会提示No symbol "var" in current context.原因：程序编译时开启了优化选项，那么在用GDB调试被优化过的程序时，可能会发生某些变量不能访问，或是取值错误码的情况。这个是很正常的，因为优化程序会删改程序，整理程序的语句顺序，剔除一些无意义的变量等，所以在GDB调试这种程序时，运行时的指令和你所编写指_no registers调试显示
文章浏览阅读3.4k次。import java.util.Random;import org.drools.util.UUIDGenerator;/** * * * 类名称：GenerateIdUtil * 类描述： 主键生成工具类 * @author chenly * 创建时间：Jul 10, 2012 8:10:43 AM * 修改人： * 修改时间：Jul 10, 2012 8..._idgeneratorutils.generateid()
文章浏览阅读1.6w次，点赞17次，收藏47次。VB程序设计教程(第四版) 龚沛曾 课后习题答案目录第一章课后答案第二章课后答案第三章课后答案第四章课后答案第五章课后答案第六章课后答案第七章课后答案第八章课后答案....第一章课后答案1、简述Visual Basic的特点。答：(1)具有基于对象的可视化设计工具(2)事件驱动的编程机制(3)提供易学易用的应用程序集成开发环境(4..._龚沛曾vb.pdf
文章浏览阅读452次。曰髯?分类号:论文编号:2丛坦丝旦生丛密级:公开贵州大学2009届硕士研究生学位论文基于即神经网络的语音增强研究学科专业:电路与系统研究方向:模式识别导师:刘宇红教授研究生:周元芬中国贵州’贵阳2009年5月摘要-5Abstract-6第一章绪言11.1引言11.2语音增强的意义与研究现状21.2.1语音增强的目的21.2.2语音增强的意义21.2.3国内外语音增强研究现状41.2.4语音增强的算..._基于神经网络的语音增强
文章浏览阅读1.7w次。问题描述： 在使用maven依赖项spring MVC、Hibernate和Struts2构建REST web项目之后，我将项目进行打包 “ProcjectName.war”，并通过tomcat manager html页面将其上传到 Linux 的tomcat 服务器，它可以正常工作。但是当我尝试在本地tomcat服务器 (Windows平台)上部署war时，我从tomcat catali..._org.springframework.core.io.resource
文章浏览阅读9.7k次。1.问题展示2.解决方案1.任意窗口, 打开git bash2.命令行界面, 输入cd C:3.cat ~/.ssh/id_rsa.pub正常下面应该显示一大串公钥如果没有,显示如下图, 则进行下一步, 创建公钥4.创建公钥, 输入 ssh-keygen5.然后一直下一步, 直到出现6.再次输入cat ~/.ssh/id_rsa.pub下面一大串数字便是公钥,复制这些字符串, 打开github, 点击头像, 打开settings, 打开SSH and GPG Keys_cmd warning: permanently added
文章浏览阅读154次。[code="java"]1. SQL/Plus 常用命令 a. help [topic] 查看命令的使用方法，topic表示需要查看的命令名称。 如： help desc; b. host 该命令可以从SQL*Plus环境切换到操作系统环境，以便执行操作系统命名。 c. host [command] 在sql*plus环境中执行操作系统命令，如：host notepad.exe..._sql+plus的使用方法
文章浏览阅读441次。该文档均来自互联网,如果侵犯了您的个人权益,请联系我们将立即删除!**学校毕 业 论 文**学校园网络服务器的配置与管理姓 名： **学 号： **指导老师：系 名：专 业： 计算机网络技术班 级：二0一一年十二月十五日摘 要随着网络技术的不断发展和Internet的日益普及，许多学校都建立了校园网络并投入使用，这无疑对加快信息处理，提高工作效..._服务器配置与应用论文