Html和CSS布局技巧-单列布局（一）

git 地址： https://gitee.com/renyangli123/bokeyuan.git

一、单列布局

（1）水平居中

　　水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）

//使用inline-block 和 text-align实现

//使用inline-block 和 text-align实现
//优点：兼容性好；
//不足：需要同时设置子元素和父元素


<style media="screen">
.parent{
    text-align: center;
    border: 1px solid #000;
}
.child{
    display: inline-block;
    border:1px solid #000;
}
</style>
<body>
<div class="parent">
    <div class="child">
            水平居中
    </div>
</div>
</body>

View Code

//使用margin:0 auto来实现

优点：兼容性好
缺点: 需要指定宽度

.child{
     200px; margin: 0 auto;
    border: 1px solid #000;
    text-align: center;
}

//使用table实现
优点:只需要对自身进行设置
不足:IE6,7需要调整结构

<style media="screen">
.child{
    display: table;
    margin: 0 auto;
    border: 1px solid #000;
}
</style>

//使用绝对定位实现
不足：兼容性差,IE9及以上可用

<style media="screen">
.parent{position: relative;}
.child{position: absolute;left: 50%;
    /*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度*/
    transform: translate(-50%)
}
</style>

//实用flex布局实现
缺点：兼容性差，如果进行大面积的布局可能会影响效率

<style media="screen">
/*第一种方法*/
.parent{display: flex;justify-content: center;}
/*第二种方法*/
.parent{display: flex;}
.child{margin: 0 auto;}
</style>

　　(2) 垂直居中

// html
<body>
<div class="parent" style="height:80px;background:#f00;">
    <div class="child">
            垂直居中
    </div>
</div>
</body>

vertical-align,称之为“inline-block依赖型元素”只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用.
在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

<style media="screen">
/*第一种方法*/ .parent{display:table-cell;vertical-align:middle;height:80px;}
/*第二种方法*/ .parent{display:inline-block;vertical-align:middle;line-height:80px;}
</style>

// 使用绝对定位

<style media="screen">
.parent{position: relative;height: 80px;background: #f00;}
.child{position: absolute;top: 50%;transform: translate(0, -50%)}
</style>

// 使用flex实现

<style media="screen">
/* 使用flex实现 */
.parent{display: flex;align-items: center;}
</style>

（3）水平垂直全部居中

<!-- 利用vertical-align,text-align,inline-block实现 -->
<style media="screen">
.parent{
    /*  500px; 需要设置一下宽度*/
    display: table-cell;vertical-align:middle;text-align: center;
}
.child{display: inline-block;}
</style>

<!--利用绝对定位实现-->
<style media="screen">
.parent{position: relative;}
.child{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
</style>

<!--利用flex实现-->
<style media="screen">
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>