css实现居中布局的解决方案

html示例代码如下：

<div class="parent">
    <div class="child">Demo</div>
</div>
 
上面的parent元素是居中元素的外部div元素，里面的child元素就是要去做居中的元素，这两个元素的大小都是不固定的

水平居中
上面html示例代码水平布局效果示意图如下所示：

为了能让大家看清楚效果，分别用不同颜色来区分出来了。

上图表示parent元素的效果图

上图是parent元素里加入child元素代码后的效果图(因为里面为block元素，会填充父元素的)

1. inline-block + text-align

此时给child加入一行代码：display: inline-block;，child元素会变的和文字宽度一样大小。效果图如下：

此时再给parent加入一行代码：text-align: center;，它会将child元素往中间移动。效果图如下：

代码示意：

.parent{
   text-align: center;
}
.child{
    display: inline-block;
}
 
分析： text-align 在块级元素上时，会对里面的 inline 级别元素起作用，而我们的child元素已经设置成了 inline-block，所以，会将child元素移到中间，从而实现水平居中布局。

疑问： parent元素里的text-align:center;会继承下去，如果child元素里面是多行文本时，想靠左显示，怎么办？

解决方案： 在child元素里面设置text-align:left;覆盖掉继承自父元素的text-align:center;属性即可。

2. table + margin

基本结构图与上面一样，此时在child元素里面加入一行代码：display:table;，child元素会变的和文字宽度一样大小。效果图如下：

分析： 因为table在不设置100%的情况下，宽度就是table元素内容宽度。

再继续在child元素里加入一行代码：margin:0 auto;，此时效果图如下：

分析： table还有一个特性，就是可以应用margin: auto;，此时即实现了水平居中。

代码示意：

.child{
    display: table;
    margin: 0 auto;
}
 
3. absolute + transform

先设置如下代码：

.parent{
    position:relative;
}
.child{
    position: absolute;
}
 
此时效果图如下：

再在child元素里加入一行代码：left:50%;，此时效果图如下：

此时可以看到，给child元素设置left:50%;并不能实现居中，因为child元素还有自身宽度，此时可以利用transform里面的translate属性的一个特性，即translate的百分比参照物是自身。 此时再给child元素加入一行代码：transform:translateX(-50%);，效果图如下：

代码示意：

.parent{
    position:relative;
}
.child{
    position: absolute;
    left:50%;
    transform:translateX(-50%);
}
 
4. flex + justify-content

代码示意：

.parent{
    display: flex;
    justify-content: center;
}
 
效果图如下：

因为flex支持margin属性，可以不用justify-content也可以，设置如下代码一样可以实现水平居中：

.parent{
    display: flex;
}
.child{
    margin:0 auto;
}
 
垂直居中
上面html示例代码垂直布局效果示意图如下所示：

1. table-cell + vertical-align

代码示意：

.parent{
    display:table-cell;
    vertical-align:middle;
}
 
效果图如下：

分析： table-cell相当于将外面的元素变为表格里面的单元格，然后利用单元格支持vertical-align属性来实现垂直居中。

2. absolute + transform

与上面的水平居中使用absolute + transform原理基本一样，只是方向不同。

代码示意：

.parent{
    position:relative;
}
.child{
    position: absolute;
    top: 50%;
    transform:translateY(-50%);
}
 
效果图与上面效果一样。

3. flex + align-items

给parent元素设置display:flex;，效果图如下：

分析： 因为align-items的默认值是stretch，即元素被拉伸以适应容器，所以会拉伸至父元素一样大小。

再给parent元素设置align-items:center;即可，效果图如下：

代码示意：

.parent{
    display: flex;
    align-items: center;
}
 
水平垂直居中
1. inline-block + text-align + table-cell + vertical-align

实际就是前面水平居中和垂直居中的组合，核心是利用table-cell单元格特性显示居中显示。

代码示意：

.parent{
       text-align: center;
       display:table-cell;
    vertical-align:middle;
}
.child{
    display: inline-block;
}
 
效果图如下：

2. absolute + transform

其实也是上面水平和垂直的结合体。核心是transform和translate。

代码示意：

.parent{
    position:relative;
}
.child{
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
}
 
效果图与上图所示一样。

3. flex + justify-content + align-items

也是上面水平和垂直的方式结合体。核心利用flex布局里的水平垂直居中。

代码示意：

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
 转自https://blog.csdn.net/DLGDark/article/details/104148185?utm_source=app