關於CSS布局技巧的總結分享

來源:互聯網
上載者:User

單列布局

水平置中

  1. 父元素text-align:center;子項目:inline-block;

  • 優點:相容性好;

  • 不足:需要同時設定子項目和父元素

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>水平置中1</title><style>    .parent {        width: 500px;        height: 400px;        background: red;        text-align: center;    }    .child {        display: inline-block;        width: 300px;        height: 100px;        background: blue;    }</style></head><body><p class="parent">    <p class="child"></p></p></body></html>
  1. 子項目margin:0 auto;

  • 優點:相容性好

  • 缺點:需要指定寬度

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>水平置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;        }        .child {            width: 300px;            height: 100px;            background: blue;            margin:0 auto;        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>
  1. 子項目{display:table;margin:0 auto;}

  • 優點:只需要對自身進行設定

  • 不足:IE6,7需要調整結構

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>水平置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;        }        .child {            width: 300px;            height: 100px;            background: blue;            margin:0 auto;            display:table;margin:0 auto;s        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>
  1. 父元素:relative;子項目:absolute;left:50%;margin-left:-寬度的一半

  • 優點:相容性好

  • 缺點:需要知道子項目的寬度

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>水平置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;            position: relative;            top: 0;            left: 0;        }        .child {            width: 300px;            height: 100px;            background: blue;            position: absolute;            top: 0;            left: 50%;            margin-left: -150px;        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>
  1. 父元素:relative;子項目:absolute;left:50%;transform:translate(-50%,0);

  • 優點:相容性差

  • 缺點:不需要知道子項目的寬度

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>水平置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;            position: relative;            top: 0;            left: 0;        }        .child {            width: 300px;            height: 100px;            background: blue;            position: absolute;            top: 0;            left: 50%;            transform: translate(-50%,0);        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>
  1. 彈性盒子:父元素:display:flex;justify-content:center;

  • 優點:簡單

  • 缺點:相容性差

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>水平置中1</title><style>    .parent {        width: 500px;        height: 400px;        background: red;        display: flex;        justify-content: center;    }    .child {        width: 300px;        height: 100px;        background: blue;    }</style></head><body><p class="parent">    <p class="child"></p></p></body></html>

垂直置中

  1. vertical-align:center;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>水平置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;            display:table-cell;            vertical-align:middle;        }        .child {            width: 300px;            height: 100px;            background: blue;        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>垂直置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;            vertical-align:middle;            line-height:450px;                    }        .child {            width: 300px;            height: 100px;            background: blue;            display:inline-block;        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html><!-- 這種方法需要知道父元素和子項目的高度,父元素的line-height的值為父元素高度減去子項目高度的一半。-->
  1. 父元素:position:relative;子項目:positon:absolute;top:50%;transform:translate(0,-50%);

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>垂直置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;            position: relative;            top: 0;            left: 0;                  }        .child {            width: 300px;            height: 100px;            background: blue;            position: absolute;            top: 50%;            left:0;            transform: translate(0,-50%);        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>
  1. 父元素:position:relative;子項目:positon:absolute;top:50%;margin-top:-子項目高度的一半;

  2. 父元素:display:flex;align-items:center;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>垂直置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;            display: flex;            align-items: center;                }        .child {            width: 300px;            height: 100px;            background: blue;        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>

水平垂直置中

  1. 父元素:display:table-cell;vertical-align:middle;text-align:center;
    子項目;display:inline-block;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>垂直置中1</title>    <style>        .parent {            width: 500px;            height: 400px;            background: red;            display:table-cell;            vertical-align:middle;            text-align:center;         }        .child {            width: 300px;            height: 100px;            background: blue;            display: inline-block;        }    </style></head><body>    <p class="parent">        <p class="child"></p>    </p></body></html>
  1. 父元素:position:relative;
    子項目:position:absolute

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.