CSS垂直水平居中
2018-06-24 02:12:07来源:未知 阅读 ()
通过之前总结水平居中与垂直居中的基本方法,梳理垂直水平同时居中的方法就没有那么乱了。
- text-align:center + line-height
如下图,div2中用text-align+line-height实现单行文本水平垂直居中。
也可以将div2设置为inline-block实现div垂直水平居中。
- text-align:center + vertical-align:middle
如果想让div2在div1中居中,那么需要将父元素设置text-align:center,因为居中效果只对文本内容和行内元素有效,那我们将子元素div2设置为inline-block元素,还要将父元素设置为设置为table-cell元素,vertical-align:middle,
- margin:0 auto+vertical-align:middle
?margin: 0 auto;在本身元素上设置,可以实现块级元素水平居中,所以将子元素设置为margin:0 auto;再还要将父元素设置为设置为table-cell元素,vertical-align:middle即可
- 绝对定位实现垂直水平居中
绝对定位元素垂直水平居中:因为绝对定位元素具有伸缩性,所以如果我们将绝对定位元素的width设置为auto时,同时把left与right设置为0,那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值,margin为auto的前提下,只要 left 和 right 的值相等(或都为0),且不超过其相对元素减去该绝对定位元素 width 的一半,就可以实现水平居中了。垂直居中也是如此,只要top与bottom的值也相等或者都为0就可以,这样我们的绝对定位元素就做到了垂直水平居中了。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash