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

水平居中

1、行内或类行内元素（如文本、链接）

在块级父元素中用CSS样式实现行内元素水平居中，只需要设置：text-align: center;

这种方法可以让 inline / inline-block / inline-table / flex 等类型的元素实现居中。

效果图：

代码：

    

        这是一段简单的文字，水平居中
    
    

        hyperlink1
        hyperlink2
        hyperlink3
        hyperlink4
    

2、子盒子已知宽度

效果图​​​​​​​

html代码

实现方法

① margin: 0 auto;

② position定位＋margin-left

3、子盒子有无宽度均适用

效果图

html代码

    

        
居中
    

实现方法

①  position定位 + transform

② flex布局

垂直居中

1、行内元素

设置line-height与父级元素的height相等

效果图：

代码：

    

        
垂直居中
    

2、子盒子已知高度

效果图

html代码

    

        
垂直居中
    

实现方法

① position定位+ margin-top

3、子盒子有无高度均适用

效果图

html代码​​​​​​​

    

        
垂直居中
    

实现方法

① 父盒子CSS样式设置伪类元素

基本思路：使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

②  position + transform​​​​​​​

③ flex布局

    

        
垂直居中
    

水平垂直居中

根据需求综合以上方法即可实现。