码迷,mamicode.com
首页 > Web开发 > 详细

CSS垂直水平居中

时间:2018-01-14 22:49:29      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:超过   col   宽度   black   alt   target   lin   文本   cti   

通过之前总结水平居中与垂直居中的基本方法,梳理垂直水平同时居中的方法就没有那么乱了。

  • 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就可以,这样我们的绝对定位元素就做到了垂直水平居中了。

 
技术分享图片

CSS垂直水平居中

标签:超过   col   宽度   black   alt   target   lin   文本   cti   

原文地址:https://www.cnblogs.com/aaaaniu/p/8284371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!