CSS 日常练习----居中问题

记录日常 CSS 练习的小知识点 —— 居中问题

布局问题

  1. 垂直居中

    点击预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
    .parent{
    height: 200px;
    font-size: 0;
    }
    .child{
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    }
    .childSbling{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 5px;
    background: #000;
    }
    </style>
    </head>
    <body>
    <div class="parent" style="background-color: lightgray; width:200px;">
    <div class="child" style="background-color: lightblue;">我是比较长的比较长的多行文哈哈哈哈哈哈哈哈哈哈字</div>
    <i class="childSbling">买买买</i>
    </div>
    </body>
    </html>
  2. 水平居中

    点击预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
    .p{
    background: coral;
    text-align: center;
    }
    .c{
    display: inline-block;
    width: 200px;
    background: #ffaf7b;
    }
    .cc{
    text-align: left;
    }
    .parent{
    position: relative;
    }
    .childWrap{
    position: absolute;
    left: 50%;
    }
    .child{
    width:50px;
    margin:0 50%;
    }
    </style>
    </head>
    <body>
    <div class="p">
    <div class="c">门电机
    <div class="cc">的地方</div>
    </div>
    </div>
    <div class="parent" style="background-color: gray;height: 20px;">
    <div class="childWrap">
    <div class="child" style="background-color: lightblue;">DEMO</div>
    </div>
    </div>
    </body>
    </html>
  3. 水平垂直居中

    点击预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .p{
    width: 200px;
    height: 300px;
    background: red;
    position: relative;
    }
    .c {
    width: 100px;
    height: 150px;
    background: yellow;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    }
    </style>
    </head>
    <body>
    <div class="p">
    <div class="c">

    </div>
    </div>
    </body>
    </html>
0%