css居中

左右布局

1. 利用float

html

    <div class="main">
        <ul>
            <li style="background-color:antiquewhite"> 左边</li>
            <li style="background-color:aquamarine">右边</li>
        </ul>
    </div>

css

    .main {
        width: 400px;
        margin: 0 auto;
    }
    .main>ul>li {
        width: 50%;
        height: 100px;
        float: left;
        text-align: center;
    }

2. 利用flex

html

 <div class="main">
        <ul>
            <li style="background-color:antiquewhite"> 左边</li>
            <li style="background-color:aquamarine">右边</li>
        </ul>
    </div>

css

    .main {
        width: 400px;
        height: 100px;
        margin: 100px auto 0;
        border: 1px solid blue;
    }
    ul {
        display: flex;
        justify-content: center
    }
    ul>li {
        width: 50%;
        height: 50px;
    }

左中右布局

1. float布局 html

<div class="main">
        <ul>
            <li style="background-color:antiquewhite"> 左边</li>
            <li style="background-color:blueviolet">中</li>
            <li style="background-color:aquamarine">右边</li>
        </ul>
    </div>

css

    .main {
        width: 400px;
        height: 100px;
        margin: 100px auto 0;
        border: 1px solid blue;
    }
    ul>li {
        float: left;
        width: 33.333%;
        height: 50px;
    }

2. flex布局

html

 <div class="main">
        <ul>
            <li style="background-color:antiquewhite"> 左边</li>
            <li style="background-color:blueviolet">中</li>
            <li style="background-color:aquamarine">右边</li>
        </ul>
    </div>

css

    .main {
        width: 400px;
        height: 100px;
        margin: 100px auto 0;
        border: 1px solid blue;
    }
    ul {
        display: flex;
        justify-content: center
    }
    ul>li {
        width: 33.333%;
        height: 50px;
    }

水平居中

1. text-align

   对于行内元素，可以直接在其父级加上：text－align:center;

   对于块级元素，可以加display:inline-block;然后再加text－align:center;

2. margin:0 auto;

   有宽度的div，使用margin: 0 auto;即可

3. 利用绝对定位

   html

 <div class="a">
        我是a
        <div class="b">我是b</div>
    </div>

css

  .a {
        width: 500px;
        margin: 0 auto;
        height: 100px;
        background-color:antiquewhite;
        position: relative;
    }
    .b{
        width: 100px;
        height: 50px;
        background-color:brown;
        position: absolute;
        left: 50%;
        margin-left:-50px;
        text-align: center;
    }

要实现b能够水平居中，则

给a加position:relative;

给b加一个position:absolute; left:50%; margin-left:-(宽度／2)；

垂直居中

1. 利用绝对定位, top: 50%; margin-top: -(元素高度／2)

html

 <div class="a">
        我是a
        <div class="b">我是b</div>
    </div>

css

 .a {
        width: 500px;
        margin: 0 auto;
        height: 100px;
        background-color:antiquewhite;
        position: relative;
    }
    .b{
        width: 100px;
        height: 50px;
        background-color:brown;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -25px;
        margin-left:-50px;
        text-align: center;
    }

2. 如果是单行文本，设置height = line-height;

3. 利用transform

html

    <div class="a">
        <div class="b"></div>
    </div>

css

    .a {
        width: 500px;
        margin: 0 auto;
        height: 100px;
        background-color:antiquewhite;
        position:relative;
    
    }
    .b{
        width: 100px;
        height: 20px;
        background-color:brown;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

4. 利用flex的align-item:center;

html

    <div class="a">
        <div class="b"></div>
    </div>

css

    .a {
        width: 500px;
        margin: 0 auto;
        height: 100px;
        background-color:antiquewhite;
        display: flex;
        align-items: center;
    
    }
    .b{
        width: 100px;
        height: 20px;
        background-color:brown;
    }