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

Posted 2020-11-10 淡定

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV水平居中和垂直居中布局相关的知识，希望对你有一定的参考价值。

一、水平居中

1. inline-block + text-align

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

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

2. table + margin

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

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

3.absolute + transform

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

4.flex + justify content

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

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

或

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

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

1.tale-cell + vertical-align

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

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

2.absolute + transform

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

3.flex + align-items

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

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

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

效果图.png

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

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

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

2.absolute + transform

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

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

}

3.flex + judifycontent + align-items

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

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

以上是关于DIV水平居中和垂直居中布局的主要内容，如果未能解决你的问题，请参考以下文章