美文网首页
水平垂直居中

水平垂直居中

作者: 从不放弃 | 来源:发表于2018-12-27 10:09 被阅读4次

指定父级宽高 子级不定

1、transform: translate(-50%, -50%)

缺点:IE9以下不支持

.set-fun {
  position: relative;
  height: 128px;
  width: 128px;
  text-align: center;
  background-color: white;
}

.set-fun .fun-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2、table table-cell

缺点:IE8以下不支持

#container_outer{
    display:table;
    overflow:hidden;
    width:600px;
    height:400px;
}   
#container_inner{
    vertical-align:middle;
    display:table-cell;
    text-align:center;
    border:1px solid #000;
} 
#content{
    display:inline-block;
    border:1px solid #000;
}
<div id="container_outer">
    <div id="container_inner">
        <div id="content">
            动态内容...<br/>  
            动态内容...<br/>
            动态内容...
        </div>
    </div>
</div> 

a、table table-cell vertical-align:middle; 保证了垂直居中
b、 text-align:center; display:inline-block; 保证了水平居中

相关文章

  • CSS居中布局方案

    水平居中 垂直居中 水平垂直居中

  • 常用的居中方法

    本文将介绍的居中方法有 ,水平居中,垂直居中和水平垂直居中。 一水平居中 二水平垂直居中

  • 元素居中的方式

    1 水平居中 2 垂直居中 3 水平垂直居中

  • css居中方式总结(亲测有效)

    水平居中(行内元素水平居中、块级元素水平居中) 垂直居中 水平垂直居中 行内元素水平居中 text-align: ...

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • css多行垂直水平居中--table布局大法

    ======= SEO专用 table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行...

  • CSS居中大全(带截图)

    文字水平居中 图片水平垂直居中 图片与文字水平垂直居中 代码同上 DIV相对于页面垂直居中并且响应式 视口绝对垂直...

  • 居中对齐

    行内元素居中[#hang]垂直居中[#hc]水平居中[#hs] 块级元素居中[#kuai]垂直居中[#kc]水平居...

网友评论

      本文标题:水平垂直居中

      本文链接:https://www.haomeiwen.com/subject/lcwllqtx.html