day07——css布局解决方案之居中布局

 转行学开发，代码100天——2018-03-23

1.水平居中

• 使用inline-block + text-align方法

       先将子框由块级元素改为行内块元素，再通过设置行内块元素居中以实现水平居中

       即对子框元素：display：inline-block;对父框元素设置：text-align:center;

<div class="parent">
    <div class="child">demo</div>
    
</div>

.parent
        {
            width: 100px;
            height: 100px;
            text-align: center;
            border:1px solid red;
        }
        .child
        {
            display: inline-block;
        }

兼容性好，能适应ie6,ie7

• 使用table+margin方法

 先将子框设置为块级表格显示，即display:table; 再设置子框居中margin:0 auto;

 

.child
        {
            display: table;
            margin: 0 auto;
        }

只设置了子框元素，支持ie8以上；ie6，ie7浏览器中可利用table标签

<table class="parent">
    <td class="child">
        demo
    </td>
</table>

• 使用absolute+transform方法

将子框设置为绝对位置，移动子框，使子框左侧距离相对框左侧边框距离为相对边框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。设置父框为相对定位。

父框：position:relative

子框： position:absolute left:50%;transform:translateX(-50%);

    .parent
        {
            position: relative;
            border:1px solid red;
            width: 300px;
            height: 300px;
        }
        .child
        {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

 居中元素不会对其他元素产生影响，但是transform属于CSS3,兼容性有一定的影响。

• 利用flex+margin

将子框转换为flex item，再设置子框居中。

即父框： display:flex;

   子框：margin：0 auto;

 

.parent
        {
            display: flex;
            border:1px solid red;
            width: 100%;
            height: 300px;
        }
        .child
        {
            margin: 0 auto;
        }

缺点是不支持低版本

• 利用flex+justify-content

将父框设置为display:flex;justify-content:cneter;

 

    .parent
        {
            display: flex;
            justify-content: center;
            border:1px solid red;
            width: 100%;
            height: 300px;

        }

只需设置父框即可，但不支持ie6,ie7低版本。

 

2.垂直居中

• 使用teble-cell+vertical-slign方法

即将父框转化为一个表格单元格显示，类似于<td>/<th>,再通过设置单元格内容垂直居中以实现垂直居中。

即父框：display:table-cell;

    子框：vertical-align:middle;

    .parent
        {
            width: 100%;
            height: 300px;
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
        }

• 使用absolute+transform方法

类似于水平居中原理，即先将父框设置为position:relative;再将子框设置为position:absolute;top:50%;transform:translateY(-50%);

 

.parent
        {
            position: relative;
            width: 100%;
            height: 300px;
            border:1px solid red;
        }
        .child
        {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

• 使用flex+align-items方法

将父框定位设置为display:flex;设置内容居中，text-align:center;

 

3.水平垂直居中

• 使用absolute+transform方法，及将水平居中和垂直居中相结合。

设置父框：position:relative;

       子框：position:absolute; left:50%;top50%;transform:translate(-50%,-50%);

        .parent
        {
            position: relative;
        }
        .child
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

• 使用inline-block+text-align+table-cell+vertical-align

父框：display:table-cell;text-align:center;vertical-align:middle;

子框：display:inline-block;

由于该设置方法将内容表格化，其实并不是真正全局的水平垂直居中。

.parent
        {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 100%;
            height:300px;
        }
        .child
        {
            display: inline-block;
        }

• 使用flex+justify-content+align-items

设置父框：

display: flex;
justify-content: center;
align-items: center;
对于全局页面而言是水平垂直居中

.parent
        {
            
            width: 100%;
            height:300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

 以上是设置居中布局常用的方法，可选择使用。