盒子水平垂直居中的四种方式(详细总结)

盒子水平垂直居中的四种方式(详细总结)_第1张图片

盒子水平居中的四种方式

第一种

当子盒子有固定宽高的时候这样来使用
<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
style>
<body>
    <div class="father">
        <div class="child">我有宽高div>
    div>
body>

第二种

<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
        /* 子绝对定位,父相对定位,上左各百分之50
           margin左 上 子盒子宽高的一般 */
    }
style>
<body>
    <div class="father">
        <div class="child">我有宽高div>
    div>
body>

浏览器效果图
盒子水平垂直居中的四种方式(详细总结)_第2张图片

第三种

当子盒子没有固定宽高的时候这样来使用
<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
        /* 给父盒子flex布局 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        background-color: red;
    }
style>
<body>
    <div class="father">
        <div class="child">我没有宽高div>
    div>
body>

第四种

<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
    }
    .child{
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
style>
<body>
    <div class="father">
        <div class="child">我没有宽高div>
    div>
body>

浏览器效果图
盒子水平垂直居中的四种方式(详细总结)_第3张图片
盒子水平垂直居中的四种方式(详细总结)_第4张图片

你可能感兴趣的:(CSS)