码迷,mamicode.com
首页 > 其他好文 > 详细

DIV块中 元素垂直居中

时间:2018-04-30 19:52:11      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:play   ddl   visible   top   宽度   orm   内容   rap   height   

1 DIV块中 元素垂直居中

作者:知乎用户
链接:https://www.zhihu.com/question/20543196/answer/99429177
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

block 元素
    • block 元素利用绝对定位以及负外边距,适用于知道元素的宽度和高度,兼容性好,所以会看到很多远古时代的居中都采用这种办法,参照下图,注意这里的外边距减去的是 block 元素宽度的一半,即
      margin:-(width/2) px 
      
      技术分享图片
    • block 元素利用绝对定位以及 transform ,适用于不知道元素的宽度盒高度,参照下图
技术分享图片
    • block 元素在外部的容器,利用 flex 的属性将其设置为下图,则子元素 block 元素垂直居中
技术分享图片
 
 
            <div class="login_header " style="position: relative;">
                
                    <div style="position: absolute;top: 50%; transform: translateY(-50%); padding-left: 30px" >
                        登录
                    </div>

            </div>
 
作者:知乎用户
链接:https://www.zhihu.com/question/20543196/answer/99429177
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

inline 元素
技术分享图片
技术分享图片
    • 如果上面的代码都不生效的话,有可能行内元素是在表格里面,这个时候可以利用inline元素的 CSS 属性 vertical-align ,默认是 baseline 属性,将其设置为 middle,这个属性常用于 inline-level 和 table-cell 的元素。 demo传送门:inline_vertical_demo_3
技术分享图片
 
            <div class="login_header " style="display: table">
                
                    <span style="display: table-cell; vertical-align: middle" >  注意是行内元素,所以这里用span,不是DIV
                        登录
                    </span>
 
            </div>

DIV块中 元素垂直居中

标签:play   ddl   visible   top   宽度   orm   内容   rap   height   

原文地址:https://www.cnblogs.com/sysnap/p/8974089.html

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