元素上下左右居中的几种方法

定位居中1

让外层div相对定位(得设置宽高),内层div绝对定位,top、left分别设为50%,然后通过设置margin-top、margin-left值为宽度的负数并且是内层div的一半,就可以成功实现垂直水平居中了。如下:

<style>
.one{ position: relative; width: 100%; height: 500px; }
.two{ position: absolute; left: 50%; top:50%; margin-left: -100px; margin-top: -100px; background-color: #a00; width: 200px; height: 200px;  }
</style><div class="one"><div class="two"></div>
</div>

定位居中2

与1类似,不过将two的定位稍作修改,不用算什么百分比,margin什么的,原理就是让two既要往左也要往右,既要往上也要往下。这时候它就不知所措了,只好待在中间。:

.two{ position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; background-color: #a00; width: 200px; height: 200px;  }

这个方法,不仅能在内部宽度不确定时发挥作用,还能兼容各种主流浏览器,看上去似乎很完美,但事实上,当我们的需求改为:宽度随内部文字自适应 ,即宽度未设置时,这种方法就无法满足需求了,原因是left、right设为0后,inner在宽度未设置时将占满父元素的宽度。

定位居中3

居中的主要目的是让里面的div在top和left方向发生50%偏移之后,再往回偏移一定距离,而在css3中新增的属性,selector{transform:translate();}也可实现这个功能。translate代表着水平、垂直方向上的转换(位移),其中当括号内的值设为百分比时,将以元素自身宽度为基准,移位相应的宽度,显然设为-50%就可以实现我们想要的效果。
将里面的div样式修改如下:

.two{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);background-color: #a00; width: 200px; height: 200px;  }

这个方法妥善解决了内层div宽度不确定的问题,不用像第一种方法一样计算应该向左向上偏移多少了,但由于使用了css3的新属性,在低版本ie浏览器下是不兼容的。

定位居中4

运用flex布局,flex布局是移动端一种很新潮的布局方法,利用flex布局使元素垂直水平居中,缺点依然是令人头疼的兼容性问题(在ie11-中不起作用),优点是代码量比前几种方法相比略少,方便使用。

<style>
.one{ margin:0 auto;width: 100%; height: 500px; display: flex;/*设置外层盒子display为flex*/justify-content:center;/*设置内层盒子的水平居中*/align-items:center;/*设置内层盒子的垂直居中*/ 
}
.two{ display: inline-block; background-color: #a00; width: 200px; height: 200px;  
}
</style>
<body><div class="one"><div class="two">我们都是好孩子</div></div>
</body>

以上就是使div垂直+水平居中的四种方式,各有利弊。

转载于:https://www.cnblogs.com/dxzg/p/7617423.html

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

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

相关文章

System.gc() 和 Runtime.gc() 会做什么事情?

System.gc()和runtime.gc()用于提示jvm进行垃圾回收。立即开始回收还是延迟回收回收取决于jvm 会触发full gc 调用 System.gc() 实际上等效于调用&#xff1a; Runtime.getRuntime().gc()

西门子博途编程 - 另类状态机

这次我们用博途来写上次的控制任务&#xff0c;发现还是有些不一样。 和AB比&#xff0c;还是有点复杂啊。转载于:https://www.cnblogs.com/TomDing/p/7617427.html

提升面对电脑的工作效率

用ubuntu已经有一段时间了。现在还不得不在WIN上用的东西就是OUTLOOK和MS OFFICE了。OPENOFFICE还需要很长的路要走呀。不过有一个比较深的感受&#xff0c;就是我会越来越多的使用快捷键来完成原来需要鼠标点好几次的动作。不知道是不是因为我的工作原因&#xff0c;需要长时间…

面试题finalize() 方法什么时候被调用?析构函数 (finalization) 的 目的是什么?

finalize是Object类的一个方法&#xff0c;该方法在Object类中的声明 在垃圾回收器执行时会调用被回收对象的finalize()方法&#xff0c;可以覆盖此方法来实现对其资源的回收。注意&#xff1a;一旦垃圾回收器准备释放对象占用的内存&#xff0c;将首先调用该对象的finalize()方…

MFC下CSocket编程详解

MFC下CSocket编程详解: 1. 常用的函数和注意事项(详细的函数接口说明请查看MSDN): CSocket::Create 初始化(一般写服务器程序都不要用为好,用下面的 CSocket::Socket 初始化) CSocket::Socket初始化 CSocket::SetSockOpt 设置socket选项 CSocket::Bind 绑定地址端口 CSocket::…

Android style 继承

style作用在单个视图或控件上&#xff0c;抽取共有的属性&#xff0c;实现复用。 style的继承有两种方式&#xff1a; 通过parent标识父style 1 <style name"GreenText" parent"android:style/TextAppearance"> 2 <item name"android:te…

maven setting.xml 配置

<localRepository>/Users/wangzeyu/.m2/repository1</localRepository> 修改为自己本地仓库的路径&#xff0c;没有新建一个 <?xml version"1.0" encoding"UTF-8"?> <settings xmlns"http://maven.apache.org/SETTINGS/1.0.…

Web服务器故障的奇怪原因

伴随着对信息化要求的不断提升&#xff0c;相信多数单位都会架设自己的Web服务器&#xff0c;来在Internet网络中发布信息、宣传自我。为了保证任何一位上网用户都能顺畅地访问到Web服务器中的内容&#xff0c;网络管理员在正式发布Web信息之前往往需要设置一下IIS服务器&#…

Python 函数(二)

参数 以下是调用函数时可使用的正式参数类型&#xff1a; 必备参数关键字参数默认参数不定长参数必备参数 必备参数须以正确的顺序传入函数。调用时的数量必须和声明时的一样。 调用printme()函数&#xff0c;你必须传入一个参数&#xff0c;不然会出现语法错误&#xff1a; #!…

C:\WINDOWS\Installer文件夹的安全清理

这几天微软发布了不少补丁&#xff0c;系统盘&#xff08;C:\&#xff09;又开始空间告警。没办法又要研究一下哪些空间是可以释放的&#xff0c;我的C:\分配了10G的空间&#xff0c;一度又一度的空间紧张&#xff0c;大家的系统盘是多大呢&#xff1f;这一次我准备向 C:\WINDO…

[译]如何在visual studio中调试Javascript

本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?vPMsVM7rjupU&listPL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b 本次的视频我们讨论如何在Visual Studio中调试Javascript 步骤如下: 1.在Visual Studio中,右键点击一个网…

springboot出现org.springframework.beans.factory.NoSuchBeanDefinitionException问题

报错 with path [] threw exception [Request processing failed; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type org.springframework.transaction.TransactionManager available] with root causeorg.…

web.py端口被占用的错误

运行文件Python code.py 文件里用到import web出现 Traceback (most recent call last): File "code.py", line 14, in <module> app.run() File "/usr/local/lib/python2.7/dist-packages/web/application.py", line 313, in run return wsgi.runws…

对VS2008生成智能win32程序简单理解

程序中创建了主窗口&#xff0c;所以它必须为主窗口注册一个窗口类&#xff0c;创建窗口并且提供一个消息循环来为窗口处理消息。 注册窗口类 ATOM MyRegisterClass(HINSTANCE hInstance, LPTSTR szWindowClass) { WNDCLASS wc; wc.style CS_HREDRAW | CS_VREDRAW; wc.lpfnWnd…

java在读取excel时出现Unable to recognize OLE stream错误解决方法

报错截图如下 这个问题是因为你的excel版本不对&#xff0c;要把.xlsx后缀另存为.xls后缀 {"type": "error","message": "数据导入出错&#xff01;Unable to recognize OLE stream出错行&#xff1a;1,异常流水号:1724238","co…

测试工作中常用的方法

测试工作中经常会用到如下相关方法&#xff0c;主要包括PDCA、SWOT、6W2H、SMART、2/8法则、WBS任务分解法、时间管理。 PDCA循环法则 Plan&#xff1a;制定工作目标和工作计划 Do&#xff1a;按照计划执行任务 Check&#xff1a;检查执行过程中的关键点和最终结果 Action&…

git pull 时报错 Untracked Files Prevent Pull

untrack表示是新文件&#xff0c;没有被add过&#xff0c;是为跟踪的意思 可以看看有哪些文件会被删除&#xff0c;但是不会真正执行 git clean -n 删除当前目录下所有没有track过的文件. 他不会删除.gitignore文件里面指定的文件夹和文件, 不管这些文件有没有被track过 在…

测试邮件系统需要做的准备工作

大部分企业在搭建邮件系统时&#xff0c;基本上都会对市场上的邮件主流产品进行测试。软件这一类型的产品在购买前一般都要经过客户测试这个环节&#xff0c;否则很难保证其实用性和适用性。邮件系统或者叫邮件服务器&#xff0c;这类企业信息沟通的软件也不例外&#xff0c;Tu…

17.10.05

上午 模拟考试 Prob.1&#xff08;AC&#xff09;一道简单的博弈题&#xff0c;找到必胜态&#xff0c;反推普遍情况是否可以达到必胜态即可。Prob.2&#xff08;AC&#xff09;做到原题了呢。入门OJ 2092: [Noip模拟题]舞会Prob.3&#xff08;WA了3个点&#xff09;一道高精度…

Mysql之CURDATE()函数,NOW()函数,CURTIME()函数

可以看到CURDATE() 取的是年月日&#xff0c;CURTIME()取的是时分秒, NOW()取的是年月日时分秒 NOW()取的是年月日时分秒SELECTNOW();可以看到CURDATE() 取的是年月日 SELECTCURDATE();CURTIME()取的是时分秒, SELECTCURTIME();