css4)、实现居的几个方法水平、垂直、整体居

CSS 实现居中的方法（水平 垂直）

下面是实现居中的几个常用方法的使用场景（后面有更详细介绍）

• 1、text-align:center:适用于目标元素是行内元素，父元素是块级元素的情况（水平居中）
• 2、margin:0 auto:适用于目标元素是块级元素，且其宽度确定（水平居中）
• 3、决定定位和相对定位
• 4、FlexBox布局

水平居中

（一）行内元素的水平居中

• 1.1、如果其父元素是块级元素，则直接给父元素设置：text-align:center

<style>
    #foo{
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>
 
<div id="foo">
    <span>行内元素</span>
</div>

• 1.2、如果父元素是行内元素，则要先将父元素设置为块级元素（ display:block），然后再给父元素设置：text-align:center

<style>
    #foo{
        /*先将父元素设置为块级元素 */
        display:block;
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>
 
<span id="foo">
    <span>行内元素</span>
</span>

---

(二) 块级元素的水平居中

• 2.1、当子元素的宽度确定的时候，可以直接给其设置margin:0 auto
• 注：当子元素margin:auto的时候，其左右的margin将会平分剩余“可用空间”。因此会呈现水平居中的情况

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>
 
<div id="father">
    <div id="son">块级元素</div>
</div>

• 2.2、当子元素的宽度不确定时（默认和父元素宽度一样）。这时候先将子元素设置为行内元素(display: inline)，然后再给父元素设置text-align:center

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align:center
    }
 
    #son {
        background-color: green;
        /*将其设置为行内元素 */
        block:inline
    }
</style>
 
<div id="father">
    <div id="son">块级元素</div>
</div>

• 2.3、使用绝对定位和相对定位：给父元素设定为相对定位，再给子元素设置为绝对定位
• 然后再设置子元素的left:50%,以及transform:translateX(-50%)（意思是：先将子元素定位到距离父元素左边其50%的位置上，然后再将子元素向左移动子元素宽度的50%的距离，以实现水平居中)

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position:relative
    }
 
    #son {
        background-color: green;
        position:absolute;
        left:-50%;
        transform:translateX(-50%);
    }
</style>
 
<div id="father">
    <div id="son">块级元素</div>
</div>

• 2.4、使用flexBox布局
• 给父元素设置display:flex;justify-content:center;
• 注：FlexBox是一种一维布局方式（按行或按列），开启flex布局只需要给外层容器设置display:flex即可。它的子元素就会默认按行进行排列
• 在行模式下，有一条水平方向的主轴，和垂直方向的交叉轴
• 改变主轴方向上的布局，可以使用justify-content属性。justify-content:flex-end(靠右对齐);justify-content:center(居中对齐);justify-content:space-evenly(平分空间);justify-content:space-between(两端对齐)
• 改变交叉轴方向上的布局，可以使用align-items属性，align-items：flex-end(靠下对齐);align-items:center(居中对齐)

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display:flex;
        justify-content:center
    }
 
    #son {
        width: 200px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">块级元素</div>
</div>

---

垂直居中

（一）行内元素的垂直居中

• 1.1、当只有一个单行行内元素时
• 只需要将行内元素的line-height设置为父元素的高即可

```

• 1.2、当行内元素是多行时
• 给父元素设置display:table-cell;vertical-align:middle;
• 注：display:table-cell可以将元素设置具有td元素的特点
• 结合使用display: table-cell;和vertical-align: middle;可以使子元素在父元素中垂直居中

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">
    <span id="son">行内元素</span>
</div>

---

(二)块级元素的垂直居中

• 2.1、使用决定定位和相对定位：
• 给父元素设置相对定位，子元素设置绝对定位，
• 然后再给子元素设置top:50%,以及transform:translateY(-50%)

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
    }
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 2.2、使用flexBox布局
• 给父元素设置display:flex,然后再给子元素设置align-items:center

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

---

整体居中（水平垂直居中）

• 1、使用决定定位和相对定位：
• 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 2、使用flexBox布局
• 父元素设置为：display:flex;justify-content: center; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}
 
    #son {
        background-color: green;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

这篇好文章是转载于：学新通技术网