CSS——水平居中、垂直居中、水平垂直居中

这里父元素和子元素的宽高都是不确定的，想实现子元素在父元素中的水平居中、垂直居中、水平垂直居中。下面列出了部分解决方法，如果大家有好的方法，欢迎留言~

一、水平居中

html代码如下：

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

要实现子元素child在父元素parent中水平居中显示。

1、将子元素设为行内块元素，父元素添加text-align:center属性即可：

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

2、给子元素添加左、右外边距为auto即可：

.child{
    margin: 0 auto;
}

3、将父元素变成flex布局，并添加justify-content：center属性即可：

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

 4、绝对定位

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

二、垂直居中

html代码如下：

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

1、flex布局

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

2、绝对定位

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

 或者

.child{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

3、table-cell

 css代码为：

.box{
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

 

三、水平垂直居中

html代码：

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

1、绝对定位

.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2、flex布局

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

3、table-cell布局

table-cell相当与表格的td，td为行内元素无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block

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

4、绝对定位+margin：auto

.child{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}