1.单行文字居中
2.多行文字居中
3.利用background-position:center;的图片居中
4.利用display:table-cell;属性的图片居中
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>display:table-cell;垂直居中</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pic-box {
display: table-cell ;
background: pink;
font-size: 0 ;
text-align: center;
height: 600px;
width: 600px;
vertical-align: middle ;
} img{
display: inline-block ;
} </style>
</head> <body>
<div class="pic-box">
<img src="https://img.zhankr.net/ujax10zx1qg172401.jpg_300x300.jpg">
</div>
</body> </html>
5.利用display:inline-block;属性的图片居中
6.利用position:absolute;属性的居中
示例代码
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>absolute居中</title>
<style>
.container-box {
background: green;
position: relative;
width: 600px;
height: 800px;
margin: 20px;
} .container-base{
height: 200px;
width: 200px;
position: absolute;
} .container-seed {
background: pink;
/*
先将距离顶部和左边的距离都设置成50%
再减去需要居中容器本身的一半值居中 即下方的margin 或 transform 负值回去
*/
top: 50%;
left: 50%;
/* 方法一 利用margin负值回去 需要明确知道容器大小 */
margin: -100px 0 0 -100px; } .container-seed2 {
background: white;
top: 50%;
left: 50%;
/* 方法二 利用transform 的translate 平移自身的的负值的50% 需要测试解除注释即可同时注释margin 该属性需在IE9+使用,优势在于该方法不需要明确知道居中元素的大小*/
transform: translate(-50%, -50%);
} .container-seed3 {
background: #a4c2eb;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto ;
} </style>
</head><body>
<!-- 例如容器居中 -->
<h1>该方法适合已知需要居中元素的大小/若不确定则需要JS辅助</h1>
<div class="container-box">
<div class="container-seed container-base">方法一 利用margin负值回去 需要明确知道容器大小</div>
</div>
<div class="container-box">
<div class="container-seed2 container-base">利用transform 的translate 平移自身的的负值的50% 需要测试解除注释即可同时注释margin 该属性需在IE9+使用,优势在于该方法不需要明确知道居中元素的大小</div>
</div>
<div class="container-box">
<div class="container-seed3 container-base">利用absolute 的四个值为0 配合margin：auto ；即可</div>
</div>
</body></html>
7.利用：after 伪类 + content 使无法确定大小图片居中
示例代码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>垂直居中</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pic-box {
background: pink;
font-size: 0 ;
text-align: center;
height: 600px;
width: 600px;
} img{
display: inline-block ;
vertical-align: middle ;
} .pic-box:before{
display: inline-block ;
content: '' ;
overflow: hidden;
vertical-align: middle ;
height: 100%;
width: 0 ;
} </style>
</head> <body>
<div class="pic-box">
<img src="https://img.zhankr.net/ujax10zx1qg172401.jpg_300x300.jpg">
</div>
</body> </html>
