A method using a line-heigh the multi-line text centered or center the image
The text wrapped in an inline-block elements of vertical-align middle, outer element equal to the height line-heigh
1 <div class="box1"> 2 <span> plurality of rows centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines centered test a plurality of lines center </ span> 3 </div>
1 .box1 {
2 background-color: #ccc;
3 width: 300px;
4 height: 300px;
5 margin: 100px auto;
6 line-height: 300px;
7 }
8 .box1 span{
9 display: inline-block;
10 line-height: 20px;
11 vertical-align: middle;
12 }
Center the image:
1 <div class="box1"> 2 <img src="common-header-logo.png"> 3 </div>
1 .box1 {
2 background-color: #ccc;
3 width: 300px;
4 height: 300px;
5 margin: 100px auto;
6 line-height: 300px;
7 text-align: center;
font-size: 0;
8 }
9 .box1 img {
10 vertical-align: middle;
11 }
effect:
Method Two: Use the flex layout to achieve the middle (more simply, does not support IE9)
HTML as follows:
<div class="box"> <span>span多行居中测试<br>span多行居中测试<br>span多行居中测试</span> <p>p另一个段落元素</p> </div>
CSS如下：
.box{
display: flex;
width: 500px;
height: 300px;
margin: 50px auto;
border: 2px solid #000;
align-items: center;/*副轴居中*/
}
.box span{/*span是另一个flex布局容器，它本身将自适应填满除p元素外的宽度*/
flex: 1;
display: flex;
justify-content: center;/*主轴居中*/
}
方法三：使用绝对定位使图片居中
css-使不同大小的图片在固定大小的容器中居中
HTML示例如下：
<ul>
<li class="imgbox"><img src="img1.jpg"></li>
<li class="imgbox"><img src="img2.jpg"></li>
<li class="imgbox"><img src="img3.jpg"></li>
<li class="imgbox"><img src="img4.jpg"></li>
<li class="imgbox"><img src="img5.jpg"></li>
<li class="imgbox"><img src="img6.jpg"></li>
<li class="imgbox"><img src="img7.png"></li>
</ul>
方法一：
.imgbox{
position: relative;
width: 240px;
height: 240px;
}
.imgbox img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
outline: 1px solid #000;
}
说明：imgbox为放置图片的容器，高度和宽度可以设置为任意需要的大小，容器中的图片为绝对定位，使用top-bottom-left-right-margin使其居中。使用max-width和max-height使图片比容器大时也能正常显示。
方法二：
.imgbox{
font-size: 0;
width: 240px;
height: 240px;
line-height: 240px;
text-align: center;
}
.imgbox img{
max-height: 100%;
max-width: 100%;
vertical-align: middle;
outline: 1px solid #000;
}
说明：对容器设置font-size：0，消除img下多出的3px，防止居中出现偏差。outline可有可无，我是为了清晰显示图片位置才声明的outline。
效果图：（最后两个图片width/height大于容器，均能正常显示）
HTML示例如下：
<ul>
<li class="imgbox"><img src="img1.jpg"></li>
<li class="imgbox"><img src="img2.jpg"></li>
<li class="imgbox"><img src="img3.jpg"></li>
<li class="imgbox"><img src="img4.jpg"></li>
<li class="imgbox"><img src="img5.jpg"></li>
<li class="imgbox"><img src="img6.jpg"></li>
<li class="imgbox"><img src="img7.png"></li>
</ul>
方法一：
.imgbox{
position: relative;
width: 240px;
height: 240px;
}
.imgbox img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
outline: 1px solid #000;
}
Description: imgbox container, the height and width according to the size of the images may be provided in any desired, the container picture for absolute positioning, using the top-bottom-left-right-margin to center. Using max-width and max-height is larger than the image so that the container can be displayed properly.
Method Two:
.imgbox{
font-size: 0;
width: 240px;
height: 240px;
line-height: 240px;
text-align: center;
}
.imgbox img{
max-height: 100%;
max-width: 100%;
vertical-align: middle;
outline: 1px solid #000;
}
Description: Set container font-size: 0, img eliminate the extra 3px, to prevent the center deviation. outline dispensable, I was to clearly show the outline picture position was declared.
The last two images in FIG effect :( width / height is greater than the container, can be displayed correctly)