单列居中布局

单列布局

水平居中

水平居中在页面布局中是最为常见的一种布局方式，标题出现较多；水平居中的四种方式：

1、使用margin：0 auto; 进行布局

<style>
    .content{
        width:100px;
        height:100px;
        margin:0 auto;
        background-color:red;
    }
</style>
<div class="content"></div>

2、使用绝对定位布局

<style>
   .parent{
       width:400px;
       height:200px;
       border:1px solid #000;
       position:relative;
   }
   .child{
       width:100px;
       height:100px;
       background-color:red;
       position:absolute;
       left:50%;
       margin-left:-50px; //50为容器宽度的一半
   }
</style>
<div class="parent">
    <div class="child"></div>
</div>

3、使用text-align:center;和inline-block进行布局

<style>
    .parent{
        width:400px;
        height:200px;
        border:1px solid #000;
        text-align:center;
    }
    .child{
        width:100px;
        height:100px;
        background-color:red;
        display:inline-block;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

4、使用table进行布局

<style>
     .parent{
        width:400px;
        height:200px;
        border:1px solid #000;
    }
    .child{
        background-color:red;
        display:table;
        margin:0 auto;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

5、使用flex进行布局( 兼容性差 )

<style>
    /* 方式1 */
    .parent{
        width:400px;
        height:200px;
        border:1px solid #000;
        display:flex;
    }
    .child{
        background-color:red;
        margin:0 auto;
    }
    /* 方式2 */
    .parent{
        width:400px;
        height:200px;
        border:1px solid #000;
        display:flex;
        justify-content:center;
    }
    .child{
        background-color:red;
    }
</style>
<div class="parent">
    <div class="child">flex水平居中布局</div>
</div>

垂直居中

1、使用vertical-align进行布局

<style>
    .parent{
        width:400px;
        height:200px;
        border:1px solid #000;
        display:table-cell;
        vertical-align:middle;
    }
    .child{
        background-color:red;
    }
</style>
<div class="parent">
    <span class="child">垂直居中</span>
</div>

2、使用line-height进行布局

<style>
    .parent{
        width:400px;
        height:50px;
        line-height:50px;
        border:1px solid #000;
    }
    .child{
        background-color:red;
    }
</style>
<div class="parent">
    <span class="child">垂直居中</span>
</div>

3、使用绝对定位布局

<style>
   .parent{
       width:400px;
       height:200px;
       border:1px solid #000;
       position:relative;
   }
   .child{
       width:100px;
       height:100px;
       background-color:red;
       position:absolute;
       top:50%;
       margin-top:-50px; //50为容器宽度的一半
   }
</style>
<div class="parent">
    <div class="child"></div>
</div>

4、使用实用flex实现

<style>
   .parent{
       width:400px;
       height:200px;
       border:1px solid #000;
       display:flex; 
       align-items:center;
   }
   .child{
       background-color:red;
   }
</style>
<div class="parent">
    <span class="child"></span>
</div>