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%);
css设置文字垂直居中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; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。