码迷,mamicode.com
首页 > 其他好文 > 详细

DIV水平居中和垂直居中布局

时间:2019-08-18 15:29:44      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:items   idt   pos   str   元素   大小   sla   code   form   

一、水平居中

1. inline-block + text-align

text-align(他会有继承) 作用在块级元素上,会让块级元素的inline-block子级 ,进行排列

<div class="parent">
   <div class="child">demo</div>
</div>

  .parent{
    width: 200px;
    text-align: center;
   }
        .child{
    display: inline-block;  
   }

2. table + margin

table如果不给它的所在元素设置宽的话,他的宽会是由内容撑开

<div class="parent">
   <div class="child">demo</div>
</div>

  .child{
      display: table;
      margin: 0 auto;
     }

3.absolute + transform

<div class="parent">
   <div class="child">demo</div>
</div>

.parent{
    position: relative;
   }
   .child{
    position: absolute;
    left:50%;
    transform: translateX(-50%);
   }

4.flex + justify content

flex的属性值其实也可以支持margin:0 auto;

<div class="parent">
   <div class="child">demo</div>
</div>

.parent{
    display: flex;
    justify-content: center;
   }

 

.parent{
    display: flex;
   }
   .child{
    border: 1px solid green;
    margin: 0 auto;
   }

二、父元素和子元素都不定高,实现垂直居中

1.tale-cell + vertical-align

tale-cell 单元格这样的属性值,会自动让他的子元素居中

<div class="parent">
   <div class="child">demo</div>
</div>

.parent{
    display: table-cell;
    vertical-align: middle;
   }

2.absolute + transform

<div class="parent">
   <div class="child">demo</div>
</div>

.parent{
    position: relative;
   }
   .child{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
   }

3.flex + align-items

align-items他的默认值是拉伸,布满整个容器

<div class="parent">
   <div class="child">demo</div>
</div>

.parent{
    display: flex;
    align-items: center;
   }

三、容器大小不固定,同时居中

技术图片

 

效果图.png

1.inline-block + text-align + tale-cell + vertical-align

tale-cell 单元格这样的属性值,会自动让他的子元素居中

<div class="parent">
   <div class="child">demo</div>
</div>

.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
   }
   .child{
    display: inline-block;
   }

2.absolute + transform

<div class="parent">
   <div class="child">demo</div>
</div>

.parent{
    position: relative;
   }
   .child{
    position: absolute;
    top:50%;

    left:50%;
    transform: translate(-50%,-50%);

   }

3.flex + judifycontent + align-items

align-items他的默认值是 stretch拉伸,布满整个容器

<div class="parent">
   <div class="child">demo</div>
</div>

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

DIV水平居中和垂直居中布局

标签:items   idt   pos   str   元素   大小   sla   code   form   

原文地址:https://www.cnblogs.com/x-yy/p/11372357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!