css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

实现水平垂直居中方法有很多种：

一.万能法：

1.已知高度宽度元素的水平垂直居中，利用绝对定位和负边距实现。

<style type="text/css">
        .wrapper{
            position:relative;
            background: #acc;
            width: 500px;
            height: 500px;
        }

        .content{
            background: #aaa;
            width:400px;
            height:400px;
            position: absolute;        /*//父元素需要相对定位 */
            top: 50%;
            left: 50%;
            margin-top:-200px ;     /* //本身二分之一的height，width */
            margin-left: -200px;
        }

</style>

<div class="wrapper">
        <div class="content"></div>
</div>

2.已知高度宽度元素的水平垂直居中，利用绝对定位和margin。

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

 

二、行内元素（内联元素）水平居中方案:

1.行内元素的水平居中

text-align: center;
width: 200px;
display: inline-block;

 

2.行内元素-Flex布局：水平垂直居中

设置display:flex; justify-content:center;align-items: center  (灵活运用,支持Chroime，Firefox，IE9+)

        .box {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            width: 1000px;
            height: 600px;
            border: 1px solid red;
        }
        .inner {
            width: 300px;
            height: 200px;
            background-color: red;
        }    


<div class="box">
     <section class="inner"></section>
</div>

最简单的写法：

.container{

　　display: flex;

  height: 600px;

}

.center{

 margin : auto;
}

 

行内元素垂直居中设置：

1.父元素高度确定的单行文本（内联元素）：设置 height = line-height；

    height: 50px;
    text-align: center;   /* 
    line-height: 50px;

 

2.父元素高度确定的多行文本（内联元素）：
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；
b:先设置 display:table-cell 再设置 vertical-align:middle；

         .span_box {
            display: table;
        }
        .words_span {
            display: table-cell;
            vertical-align: middle;
        }        

<div class="span_box bg_box">
    <span class="words_span">
        父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
    </span>
</div>

 

三、块级元素居中方案

1.定宽块级元素水平居中
设置 左右 margin 值为 auto；

margin: 0 auto;

 

2.不定宽块状元素

水平居中

a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；
b:给该元素设置 displa:inine 方法；
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
利用display:table-cell属性使内容垂直居中;
使用css3的新属性transform:translate(x,y)属性;
使用:before元素;

 

四、css3的transform属性

.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

下面是本人做项目时遇到的一个需求：要求：图片垂直水平居中及放大  的例子

<div class="imginfan">

　　<a class="tooltip" href="#">
　　　　<img :src="item.images" height="63" width="62" alt="">

　　　　<!-- 放大图 -->
　　　　<div class="inner">
　　　　　　<img class="" :src="item.images" height="360" width="280" alt="">
　　　　</div>
　　</a>
</div>

/* 图片居中*/

.imginfan{ position: relative; }

 

.imginfan img {

text-align:center;

position: absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

transition: all 0.6s; }

 

.imginfan img :hover{transform: scale(1.2); }

/* 图片放大部分 相对于原先盒子定位 */

.tooltip{ z-index:2; }

.tooltip:hover{ z-index:3; }

.tooltip .inner{ display: none; }

.tooltip:hover .inner{    /*div的inner标签仅在 :hover 状态时显示*/

display:block;

position:absolute;

top:100px;

left:250px;

border:1px solid black;

background-color:#F2F2F2;

z-index:999; }