CSS中设置元素垂直水平居中

1. 利用绝对定位(absolute)和外边距(margin)

说明:这种方式适用子级的宽(width)高(height)固定,将父级(box)设置成相对定位(position: relative),将子级(content)设置成绝对定位(相当于其父级),top、left给50%,再用margin-top=-(子级高度的一半),margin-left=-(子级宽度的一半)。

代码:

/* 这里是css样式的内容 */
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       .box{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           background-color: lawngreen;
           position: relative;
       }
       .content{
           width: 100px;
           height: 100px;
           background-color: blue;
           position: absolute;
           left: 50%;
           top: 50%;
           margin-top: -50px;
           margin-left: -50px;
       }
   </style>
<!-- 这是是html的内容  -->
   <div class="box">
       <div class="content"></div>
   </div>

显示效果如下:


2. 利用绝对定位(absolute)和外边距(margin:auto)

说明:这种方式可适用子级的宽(width)高(height)不固定,将父级(box)设置成相对定位(position: relative),将子级(content)设置成绝对定位(相当于其父级),top、left、right、bottom给0,再用margint=auto。

代码:

 <style>
       *{
           margin: 0;
           padding: 0;
       }
       .box{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           background-color: lawngreen;
           position: relative;
       }
       .content{
           width: 100px;
           height: 100px;
           background-color: blue;
           position: absolute;
           left: 0;
           top: 0;
           right: 0;
           bottom: 0;
           margin: auto;
       }
   </style>
   <div class="box">
       <div class="content"></div>
   </div>

显示效果如下:


3. 利用绝对定位(absolute)和transfrom

说明:此方法利用了定位和CSS3的形变,另外不需要知道居中元素的宽高就可以使用。

代码:

 <style>
       *{
           margin: 0;
           padding: 0;
       }
       .box{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           background-color: lawngreen;
           position: relative;
       }
       .content{
           padding: 50px;          /* 此处的padding只是为展示子级宽高不定,由内容撑开 */
           background-color: blue;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
       }
   </style>
   <div class="box">
       <div class="content"></div>
   </div>

显示效果如下:


4. 利用表格(diplay:table-cell)

说明:此方法把其父级变成表格样式,再利用表格的样式来进行居中。
注意:子级如果为块元素就得加margin:0 auto;也可子级设为行内元素(display:inline-block)。两种方式。

代码:

 <style>
       *{
           margin: 0;
           padding: 0;
       }
      .box{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           background-color: lawngreen;
           display: table-cell;
           vertical-align: middle;
           text-align: center;
       }
       .content{
           width: 100px;
           height: 100px;
           background-color: blue;
          /* margin: 0 auto;*/                /* 方式一 */
           display: inline-block;            /* 方式二 */
       }
   </style>
   <div class="box">
       <div class="content"></div>
   </div>

显示效果如下:


5. 利用弹性盒模型(flexBox)

说明:此方法,利用了CSS3的新特性flex。不需要知道居中元素的宽高就可以使用。但需要注意的是:在移动端使用完美,但pc端有兼容性问题。

代码:

 <style>
       *{
           margin: 0;
           padding: 0;
       }
     .box{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           background-color: lawngreen;
           display: flex;
           justify-content: center;//设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
           align-items:center;//侧轴(纵轴)方向上的对齐方式
       }
       .content{
           padding: 50px;      /* 此处的padding只是为展示子级宽高不定,由内容撑开 */
           background-color: blue;
       }
   </style>
   <div class="box">
       <div class="content"></div>
   </div>

显示效果如下:


6. 基线对齐方式(vertical-align:middle)

说明:此方法,设置了一个“参照物(reference)”和容器一样高一样,然后在父级设置水平对齐方式( text-align:center),并在参照物和子级设置基线对齐方式(vertical-align:middle)。不需要知道居中元素的宽高就可以使用注意:需要将参照物和子级都设成行内块元素( display:inline-block)

代码:

 <style>
       *{
           margin: 0;
           padding: 0;
       }
    .box{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           background-color: lawngreen;
           text-align:center;
       }
       .content{
           padding: 50px;         /* 此处的padding只是为展示子级宽高不定,由内容撑开 */
           background-color: blue;
           display:inline-block;
           vertical-align:middle;
       }
       .reference{
           width:0px;
           height:100%;
           display: inline-block;
           vertical-align:middle;
       }
   </style>
   <div class="box">
       <div class="content"></div>
      <span class="reference"></span>
   </div>

显示效果如下:


本人遇到的或者工作过中使用的先总结到这里,以后有新方式还有补充ing....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 利用绝对定位(absolute)和外边距(margin)说明:这种方式适用子级的宽(width)高(height)...
    萝莉薇阅读 370评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,204评论 3 30
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,662评论 0 30
  • 深夜的咖啡馆,音乐没有停歇 轻柔的鼓点间,和弦飞舞 当声音攀伸到皮肤的边缘时 微弱的闪电从心底掠过 而那闪电般的酸...
    蒋菱阅读 710评论 1 1