一文大白话讲清楚CSS元素的水平居中和垂直居中

一文大白话讲清楚CSS元素的水平居中和垂直居中

• 先说为啥就要讲居中，不讲别的，因为很简单，因为居中常用且关键
• 那讲一个元素居中，先得看这个元素是个什么货色了吧
• 一般有两种货色，

1. 元素的宽高已知
2. 元素的宽高未知

• 为啥这么分，因为宽高已知的号操作啊，我都知道你多大了，然后页面就那么大，如果你不居中我就移动呗，移动到居中
• 剩下的不知道宽高的，那没法移啊，不知道移到哪合适，那就要另外另外想办法了
• 所以，先讲宽高已知的

1.已知元素宽高的居中方案

1.1 利用定位+margin:auto

• 上代码

<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        position: relative;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

• 父元素设置相对定位，子元素设置绝对定位，并且子元素的4个定位属性都设置为0，这时候如果子元素没有宽高，会被拉满父元素
• 但是这时候他有宽高，所以它显示100x100,但是这时候子元素的虚拟占位已经撑满了整个父级，如果我们再给一个margin:auto他就可以上下左右都居中了。
• 哪有又问了，凭啥margin：auto就居中了，要是不给auto，给个margin: 10 50 50 10呢。
• 那就会按照这个margin去排列。
• 说白了就是这么个意思，现在父元素下子元素的虚拟占位跟父元素一样大，然后我们把子元素的位置放进去，放进去因为不一样大，就要考虑跟父元素哪个边近一点。有可能哪个都想近一点，哪个都想远一点，那怎么办，auto，你们自己看着分吧，看着分怎么分，平分呗。所以居中了。
• 明白了没有。

1.2 利用定位+margin负值

• 直接上代码

<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        position: relative;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

• 这个啥意思，这个好理解，就是我先把你top：50%，left：50%,如果子元素宽高小到极限的话是不是已经居中了，但是现在你有宽度各位一百，那怎么办，我在倒着往回移元素本身的一半不就OK了
• 上图
  

1.3 table布局

• 设置父元素的display：table-cell，子元素设置display:inline-block,利用vertical和text-align让所有行内块级元素水平垂直居中
• 上代码

<style>
    .parent{
        display:table-cell;
        width: 300px;
        height: 300px;
        vertical-align:middle;
        text-align: center;
        border: 1px solid black;
    }
    .child{
        display:inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

2.未知元素宽高的居中方案

2.1利用定位+transform

• 这个跟定位+margin-负值用法是一样的
• 只不过margin-负值的时候我们需要负元素宽高的一半，所以我们必须先知道宽高是多少，然后才能写
• transform的也是负值，不过translate会自动获取元素的宽高，并以元素的宽高为基准进行百分比偏移，所以我们可以设定偏移量为元素宽高的50%
• 上代码

<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        position: relative;
    }
    .child{
        background-color: red;
        position: absolute;
        top:50%;
        left: 50%;
        transform:translate(-50%,-50%);
        /*用位移代替margin进行偏移了*/
        /*margin-top: -50px;*/
        /*margin-left: -50px;*/
    }
</style>
<div class="parent">
    <div class="child">我是子元素，我没有设置宽高</div>
</div>

• 搞定
  

2.2 flex弹性布局

• 这个最简单，只要父元素设置display：flex，子元素通过justify-content：center和align-items：center轻松实现居中

<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        display: flex;
        align-items:center;
        justify-content:center;
    }
    .child{
        background-color: red;
    }
</style>
<div class="parent">
    <div class="child">我是子元素，我没有设置宽高</div>
</div>

• 搞定
  

2.3 grid网格布局

• grid网格布局和flex弹性布局用法一毛一样,但是兼容性差
• 直接上代码

<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        display: grid;
        align-items:center;
        justify-content:center;
    }
    .child{
        background-color: red;
    }
</style>
<div class="parent">
    <div class="child">我是子元素，我没有设置宽高</div>
</div>

3. 内联元素的居中布局

• 上面讲的都是块级元素的居中方式，下面讲内联元素的

1. 水平居中

• 行内元素可设置text-algin：center

<meta charset="utf-8">
<style>
    .parent{
        width: 500px;
        height: 300px;
        text-align: center;
        background-color: green;
    }
    .child{
        background-color: red;
    }
</style>
<div class="parent">
    <span class="child">我是子元素，我是内联元素<br>我的水平居中只需要父元素text-align：center就行</span>

</div>

• 如果子元素的布局是flex，则父元素的justify-content：center就行

<meta charset="utf-8">
<style>
    .parent{
        width: 300px;
        height: 300px;
        background-color: green;
        display: flex;
        justify-content:center
    }
    .child{
        background-color: red;
        line-height: 300px;
    }
</style>
<div class="parent">
    <span class="child">我是子元素，我是内联flex元素<br>我的水平居中只需要父元素justify-content:center就行</span>
</div>

2. 垂直居中

• 单行文本垂直居中，只需要让子元素的line-height=父元素的height

<meta charset="utf-8">
<style>
    .parent{
        width: 600px;
        height: 300px;
        background-color: green;
        display: flex;
        justify-content:center;

    }
    .child{
        width: 400px;
        background-color: red;
        line-height: 300px;
    }
</style>
<div class="parent">
    <span class="child">单行文本，垂直居中line-height=父height</span>
</div>

• 多行文本父元素垂直居中，可以设置父元素display：table-cell,vertical-align:middle

<meta charset="utf-8">
<style>
    .parent{
        width: 600px;
        height: 300px;
        background-color: green;
        display:table-cell;
        vertical-align:middle;

    }
    .child{
        width: 400px;
        background-color: red;

    }
</style>
<div class="parent">
    <span class="child">我是多行文本，垂直居中只需要让父元素display：table-cell；vertical-align:middle</span>
</div>