css水平居中，垂直居中

一、水平居中

   

1.  行内元素水平居中

text-align: center可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

.parent{

    text-align:center;

}

.child{

    display:inline-block;

}

2.块级元素的水平居中

①将该块级元素左右外边距margin-left和margin-right设置为auto

.child{

    width:100px;//确保该块级元素定宽

    margin:0 auto;

}

②使用table+margin

display:table在表现上类似block元素，但是宽度为内容宽。

.child{

    display:table;

    margin:0 auto;

}

③使用absolute+transform

.child{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

}

.parent{

    position:relative;

}

④使用flex+justify-content

.parent{

    display:flex;

    justify-content:center;

}

⑤使用flex+margin

.parent{

    display:flex;

}

.child{

    margin:0 auto;

}

3.多块级元素水平居中

   

   

   

 

①利用flex布局

.parent{

    display:flex;

    justify-content:center;

}

②利用inline-block

.parent{

    text-align:center;

}

.child{

    display:inline-block;

}

4.浮动元素水平居中

①定宽的非浮动元素

通过子元素设置relative + 负margin

.parent{

    width:500px;

}

.child{

    position:relative;

    left:50%;

    margin-left:-250px;

}

②不定宽的浮动元素

.parent{

    float:left;

    position:relative;

    left:50%;

}

.child{

    float:left;

    position:relative;

    right:50%;

}

③利用flex布局

.parent{

    display:flex;

    justify-content:center;

}

.chlid{

    float:left;

}

5.绝对定位元素水平居中

.parent{

    position:relative;

}

.child{

    position:absolute;/*绝对定位*/

    width:200px;

    height:100px;

    margin:0auto;/*水平居中*/

    left:0;/*此处不能省略，且为0*/

    right:0;/*此处不能省略，且为0*/

}

二、垂直居中

1.单行内联元素垂直居中

.parent{

    height:120px;

    line-height:120px;

}

2.多行内联元素垂直居中

①利用flex布局（flex）

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题

.parent{

    height:140px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

②利用表布局

利用表布局的vertical-align: middle可以实现子元素的垂直居中

.parent{

    display:table;

    height:140px;

}

.child{

    display:table-cell;

    vertical-align:middle;

}

3.块级元素垂直居中

①使用absolute+负margin(已知高度)

.parent{

    position:relative;

}

.child{

    position:absolute;  

    top:50%;

    height:100px;

    margin-top:-50px;

}

②使用absolute+transform(未知高度)

.parent{

    position:relative;

}

.child{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

}

③使用flex+align-items

.parent{

    display:flex;

    align-items:center;

}

④使用table-cell+vertical-align

通过将父元素转化为一个表格单元格显示（类似和），再通过设置vertical-align属性，使表格单元格内容垂直居中

.parent{

    display:table-cell;

    vertical-align:middle;

}

三、水平垂直居中

1.绝对定位与负边距实现（已知高度宽度， 假设宽高100px ）

.parent{

    position:relative;

}

.child{

    position:absolute;

    top:50%;

    left:50%;

    margin:-50px 0 0 -50px;

}

2.绝对定位与margin:auto（已知高度宽度， 假设宽高100px ）

.parent{

    position:relative;

    height:100px;//必须有个高度

}

.child{

    position:absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    margin:auto;//注意此处的写法

}

3.绝对定位+CSS3(未知元素的高宽，常用)

.parent{

    position:relative;

}

.child {

    position:absolute;

    top:50%;

    left:50%;

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

}

4.flex布局

.parent{

    height:100vh;//必须有高度

    display:flex;

    justify-content:center;//水平居中

    align-items:center;//垂直居中

}

5.flex/grid与margin:auto(最简单写法)

.parent {

    height: 100vh;//必须有高度

    display: grid;

}

.child {

    margin: auto;

}