水平、垂直、水平垂直居中

本文都以父包裹子来设置。

水平居中

行内元素

• 父级使用 text-align：center

<div id = 'wrap'>
        <span>居中</span>
</div>

#wrap{
    background-color: burlywood;
    text-align: center;
    height: 200px; //不设置行高 父级仅撑开
    width: 200px;
}

块类元素

一：将子类设置为行内元素:  display : inline 或者 inline-block ， 父类再使用 text-align：center

二：简单粗暴: 宽高对半  

注意此方法太依赖宽高。

三：margin: 0 auto ; (设置之后，盒子会根据父级元素实现水平居中)

此方法应用元素必须设置宽高。

#father{
  background-color: burlywood;
  text-align: center; //父级不设宽高，子元素将撑起父元素
}
#son{
  background-color: rgb(218, 106, 32);
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

四：父相子绝 定位

父相( relative )子绝( absolute )为前提。（父绝效果一样，不知道是不是在复杂的布局下父绝会影响）

1.left：50%　＋　margin-left: - （子元素宽度一半）；起效前提需已知子元素宽。

#son{
    position: absolute;
    background-color: rgb(218, 106, 32);
    width: 100px;
    height: 100px;
    left:50%;     /*将元素左边界移到父级中心*/
    margin-left:-50px; /*将子元素中心对齐父中心*/
}

2. 不需要知道宽高。

#son{
    position: absolute;
    background-color: rgb(218, 106, 32);
    height: 100px;
    left:50%;     /*将元素左边界移到父级中心*/
    transform: translateX(-50%);
}

五：Flex布局

关键代码：根据需要可设置父、子宽高。 不设置宽高，父被子元素撑开。

#father{
    display: flex;
    justify-content: center;
}

六：Grid布局

#father{
    display: grid;
    justify-content: center;
}

垂直居中

一、同样不适用又粗暴：已知宽高对半

二、子类为行内元素： line-height 等于父类高度

注意：仅支持单行文本、局限性大。

span{
    background-color: rgb(218, 106, 32);
    line-height: 200px;
}

三、父：table-cell + vertical-align：middle；

支持多行文本

#father{
   display: table-cell;
   vertical-align: middle;
}

四、父相子绝 定位

通用版，子元素不需要知道高度。

#father{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

子元素已知高度

.son{
    position: absolute;
    height: 100px;
    top: 50%;
    margin-top: -50px;
}

五：Flex布局

#father{
    display: flex;
    align-items: center;
}

六：Grid布局

#father{
    display: grid;
    align-items: center;
}

七：writing-mode

writing-mode属性定义不同的书写模式

#father{
    width: 400px;
    height: 200px; 
    writing-mode: vertical-lr; 
    text-align:center;
}
.son{
    display: inline-block;
}

水平垂直居中 

一、Flex

#father{
    display: flex;
    align-items: center;
    justify-contents: center;
}

二、Grid

#father{
    display: grid;
    align-items: center;
    justify-contents: center;
}

三、父相子绝，已知宽高：top、left、bottom、right：0 + margin：auto；

#father{
    position: relative;
    width: 400px;
    height: 200px;  

}
.son{
    position: absolute;
    height: 100px;
    width:100px;
    top:0;
    bottom: 0; 
    right: 0;
    left:0;
    margin:auto;
}

四：父相子绝 + left、top：50% + transfom

通用版本： 不需要知道宽高。

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

已知宽高，可使用左右的margin值为 -（元素宽高一半），上面有类似的步骤，这儿就不再贴代码了。

 

五：父相子绝+ calc

calc() 函数用于动态计算长度值。

     ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

#father{
    position: relative;
    width: 400px;
    height: 200px;  
}
.son{
    position: absolute;
    height: 100px;
    width:100px;
    top:calc(50% - 50px);
    left:calc(50% - 50px);   
}

六：writing-mode属性

此方法将居中块包裹在两个容器内，分别给容器设置水平书写与垂直书写模式，再结合text-align定义居中模式实现水平垂直居中。

<div id = 'father'>
    <div id = 'wrap'>
        <div class = 'son'>居中居中</div>
    </div>
</div>

#father{
    writing-mode: vertical-lr;
    text-align: center;
    width: 400px;
    height: 200px;  
}
#wrap{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.son{
    display: inline-block;
    margin: auto;
    text-align:center;
}

若想实现橘色背景有高度，在wrap处设置line-height高度即可。

 

七：采用table-cell

兼容性还不错，不需要宽高已知。

#father{
    display: table-cell;
    width: 400px;
    height: 200px;  
    text-align:center;
    vertical-align: middle;
}
.son{
    display: inline-block;
}

 

以上为参考这两个博客：https://blog.csdn.net/weixin_37580235/article/details/82317240

https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/

自己重新回忆、整理了一遍，如有不足望大佬们指出~ 小菜鸡感激不尽~