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; }