使用css实现垂直居中的方法总结

写在前面的话:

在编写html页面的时候最常考虑的就是应该是类的命名吧,其次就是该使用怎样的布局方式使得页面的适应性比较高。居中在页面布局中是最常用的布局之一了,根据度娘和本人开发经验总结出以下三种可用性比较高的居中方案,如有补充请在评论区留言指正。话不多说开搞!

正文

1.第一种:

使用 position:absolut+transform 实现垂直居中

<style>
    .parent{
                width: 100%;
                height: 500px;
                border: #008000 1px solid;
                position: relative;
                margin-bottom: 10px;
            }
            .content{
                width: 100px;
                height: 100px;
                border: #ccc 1px solid;
            }
            .content1{
                background-color: #1effcc;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);
            }
</style>
    <div class="parent">
            <div class="content content1">
            position:absolut+transform
            </div>
        </div>

效果图如下:
1285342-20200811150818882-2102128730.png

重点是将父类元素的position设置为relative,再将子元素的position设置为absolute,之后进行绝对定位(top:50%,left:50%),最后通过使用transform对元素进行修正位置,使得元素处于居中的位置。

2.第二种:

<style>
    body{
                height: 100%;
                width: 100%;
                overflow-x: hidden;
            }
            .parent{
                width: 100%;
                height: 500px;
                border: #008000 1px solid;
                position: relative;
                margin-bottom: 10px;
            }
            .content{
                width: 100px;
                height: 100px;
                border: #ccc 1px solid;
            }
            .content2{
                background-color: #11d5ff;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
</style>
    <div class="parent">
            <div class="content content2">
                <span>
                position:
                absolut
                +
                margin
                </span>
            </div>
        </div>

该方法同样可以得到居中的效果,其重点也是父类元素(.parent)的元素position设置为relative,子类设置为absolute,与第一种方式不同的是使用margin:auto 属性使得元素居中,值得一提的是top属性和bottom属性的值要一样,right和left的值要一样,这样才能保证元素

居中,为了方便都设置为0。

3.第三种:

使用vertical-align: middle;display: inline-block;

<style>
    body{
                height: 100%;
                width: 100%;
                overflow-x: hidden;
            }
            .parent{
                width: 100%;
                height: 500px;
                border: #008000 1px solid;
                position: relative;
                margin-bottom: 10px;
            }
.content{
                width: 100px;
                height: 100px;
                border: #ccc 1px solid;
                background: #FFA500;
            }
.parent2{
                text-align: center;
                line-height: 500px;
            }
.content5{
                vertical-align: middle;
                display: inline-block;
                line-height: 18px;
            }
</style>
    <div class="parent parent2">
            <div class="content content5">
                vertical-align: middle;
                display: inline-block;
            </div>
        </div>

将子类元素(.content)display设置inline-block 父类元素使用line-height的方式(设置line-height的高度为.parent 父类元素的高度)使得在垂直上对齐。

3.第四种:

使用flex布局

 <style>
         body{
         height: 100%;
         width: 100%;
         overflow-x: hidden;
         }
         .parent{
         width: 100%;
         height: 500px;
         border: #008000 1px solid;
         position: relative;
         margin-bottom: 10px;
         }
         .content{
         width: 100px;
         height: 100px;
         border: #ccc 1px solid;
         background: #FFA500;
         }
         .parent2{
        
            display: flex;
            align-items: center;
            justify-content: center;
         line-height: 500px;
         }
         .content5{
         vertical-align: middle;
         display: inline-block;
         line-height: 18px;
         }
    </style>
      <div class="parent parent2">
          <div class="content content5">
              display: flex;
              align-items: center;
              justify-content: center;
          </div>
      </div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一般化技巧常用到的语言: 大多数人也会如此… 一般人遇到…也可能做与你类似的事情 根据……(经验或发展理论) 一般...
    岁月静好_9afd阅读 153评论 0 1
  • 成,第十四天落地实修 一、断舍离 今天断了拖拉的念想,处理了之前一直拖延的事情。首先,去其他防疫站给儿子打了流感疫...
    幸福芳芳阅读 168评论 0 0
  • 1.感谢今天喝的八宝粥,饱饱的 2.感谢出的太阳,太开心了哦耶,明媚 3.感谢幸运的躲过一劫,如果再上一节台阶,就...
    krysdracula阅读 127评论 0 0
  • 今天多加了一个微信,其中一个姐姐是很有意向的客户,有一丢丢开心。
    9f2b06921e14阅读 109评论 0 0
  • 首先介绍下自己的背景: 我11年左右入市到现在,也差不多有4年时间,看过一些关于股票投资的书籍,对于巴菲特等股神的...
    瞎投资阅读 5,784评论 3 8