• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > Div+Css >  CSS容器水平和垂直居正文

CSS容器水平和垂直居中的方法总结

作者:网页模板
类型:图文教程
点击次数:
发布时间:2019-05-25 12:01
分享到:
    在实际工作中,经常会遇到容器居中问题,而CSS容器水平和垂直居中的方法,网络上已经有很多相关文章,在这里,我爱模板网也对工作中用到的一些居中方法进行了总结,并加入了一些自己的观点,如有错误欢迎指正。

    假设有如下html和样式,我们需要将inner容器居中:
<style type="text/css">
    #outer{height: 500px; background: #62bcfb}
    #inner{width:200px; height: 200px; background: #0d9450}
</style>
<div id="outer">
    <div id="inner"></div>
</div>
一、绝对定位:首先让outer相对定位relative,其次让inner绝对定位absolute,同时left和top都是50%,此时inner的左上角在outer的正中间,所以,只要让它margin-left和margin-top都是负的自身高度的一半即可:
<style type="text/css">
    #outer{height: 500px; background: #62bcfb; position: relative;}
    #inner{width:200px; height: 200px; background: #0d9450; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>
    效果如下:



    此外,这种写法的margin-left和margin-top也可以换成transform:translate(-100px,-100px)。
    注:这里的inner是必须要有宽高

二、绝对定位2:首先让outer相对定位relative,其次让inner绝对定位absolute,四个方向的距离都为0,再加上margin:auto即可:
<style type="text/css">
    #outer{height: 500px; width: 500px; background: #62bcfb; position: relative;}
    #inner{background: #0d9450; margin: auto; position: absolute; width:200px; height:200px; left:0; right: 0; top:0; bottom:0;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>
    效果如下:



    注:这里的inner是必须要有宽高的,因为四个方向都为0,一旦不写宽度,inner就会“触及底线”。

三、模拟单元格table-cell:因为表格单元格的vertical-align:middle,可以轻松让里面的内容垂直居中,这个方法就是利用这个特性来实现垂直居中的:
<style type="text/css">
    #outer{height: 500px; width: 500px; background: #62bcfb; display: table-cell; vertical-align: middle;}
    #inner{background: #0d9450; margin: auto; height:200px; width:200px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>
    注:1、outer由于变成了表格,不再像普通的块容器宽度默认一整行,所以要加上宽度。
        2、这个方法既适用于固定高度的容器,也适用于不固定高度的容器。

四、CSS3的flex:outer要变成flex容器,并且垂直居中用align-items: center,水平居中用:justify-content: center
<style type="text/css">
    #outer{height: 500px; background: #62bcfb; display: flex; align-items: center; justify-content: center;}
    #inner{background: #0d9450; height:200px; width:200px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>
    注:此方法非常好用,当然不考虑兼容性。而且,inner无论是否有宽高都适用。

五、CSS3的flex配合margin:此方法可以被视为上面的升级版,outer要变成flex容器,inner边距自动即可
<style type="text/css">
    #outer{height: 500px; background: #62bcfb; display: flex;}
    #inner{background: #0d9450; margin: auto; height:200px; width:200px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>
    注:此方法非常好用,当然不考虑兼容性。而且,inner无论是否有宽高都适用。

    就总结到这里了,已经够用了,随着浏览器兼容性越来越好,上面的很多方法已经可以放心使用了。当然,如果各位有更好的方法,欢迎在下方评论留言哦!
(责任编辑:网页模板)
  • 本文标签:
  • css居中
css3翻转效果
object-fit和object-position