元素水平垂直居中的方式有哪些?

2015-04-16 23:16:24长沙做网站严微
  • absolute加margin方案
  • fixed 加 margin 方案
  • display:table 方案
  • 行内元素line-height方案
  • flex 弹性布局方案
  • transform 未知元素宽高解决方案

absolute加margin方案

div{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%:
    margin-top: -50px;
    margin-left: -50px;
}

display:table 方案

div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100px;
    height: 100px;
}

行内元素line-height方案

div{
    text-align: center;
    line-height: 100px;
}

flex 弹性布局方案

div{
    display: flex;
    align-items: center;
    justify-content:center
}

transform 未知元素宽高解决方案

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

上一篇:

单行文本和多行文本溢出显示省略号

下一篇:

HTML5-语义化 返 回

Copyright © 2009-2019 Ywcms.Com All Right Reserved.  湘ICP备16006489号-2