直接上code：
HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>居中设置</title>
<link href="../css/居中设置.css" rel="stylesheet" />
</head>
<body>
<h1>居中样式</h1>
<p>行内元素和块级元素的垂直居中、水平居中都不一样</p>
<hr />
<h2>两个块级元素怎么垂直水平居中</h2>
<div class="box1">
<div class="box2"></div>
</div>
<br />
<div class="box3">
<div class="box4"></div>
</div>
<br />
<div class="box1">
<div class="box6"></div>
</div>
<br />
<h3>对于块级子元素宽高未知的情况下</h3>
<div class="box7">
<div class="box8"></div>
</div>
<br />
<div class="box9">
<div class="box10"></div>
</div>
<br />
<h2>内联元素和行内块元素的居中设置</h2>
<p>注意：内联元素(行内元素)不能设置宽高</p>
<div class="box11">
<a href="##">这是一条用来上下左右居中的链接--请勿点击</a>
</div>
<br />
<div class="box12">
<img src="../images/config.png" alt="Alternate Text" />
</div>
<br />
<div class="box11">
<p>可以将那些行内元素转换为块级元素，这样利用块级元素设置水平垂直居中</p>
</div>
<br />
<h2>来看看img元素</h2>
<p>
img属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。类似的元素还有input等。
行内非替换元素，例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。
</p>
<div class="box11">
<img src="../images/config.png" alt="Alternate Text" />
</div>
<br />
<div class="box13">
<img src="../images/config.png" alt="Alternate Text" />
</div>
<br />
<div class="box14">
<img src="../images/config.png" alt="Alternate Text" />
</div>
</body>
</html>
css样式：
body {
padding:0px;
margin:0px;
}
/*第一种方法将位置都写死了，有的时候很不方便*/
.box1{
width:200px;
height:200px;
background-color:#e0cbcb;
position:relative;
}
.box2 {
width: 50px;
height: 50px;
background-color: red;
/**margin设置的时候只能水平居中，不能做到垂直居中*/
/*margin: 0 auto; */
/*使用定位进行水平垂直居中*/
position: absolute;
top: 50%;
left:50%;
/*向上移动自身高度的一半*/
margin-top:-25px;
/*向左移动自身宽度的一半*/
margin-left:-25px;
}
/*第二种方法，利用css3的transform属性*/
/*这个方法比较方便*/
.box3 {
width: 200px;
height: 200px;
background-color: #e0cbcb;
}
.box4{
width:50px;
height:50px;
background-color:red;
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
/*第三种方法*/
/*position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高，那么多余的空间，会被margin：auto平均分配。*/
.box6 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin:auto;
}
/*第四种方法*/
/*利用表格的特性，将子元素看成行内元素，实现元素中的文字(文字可以是单行的，也可以是多行的)或图片水平垂直居中*/
.box7 {
width:100px;
height:100px;
background-color:red;
display:table;
}
.box8 {
background-color: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
}
/*第五种方法,强烈推荐这种计算*/
/*弹性布局 display: flex。在已知或未知元素宽高的情况下，都能使元素居中显示。*/
.box9 {
width: 100px;
height: 100px;
background-color: red;
display: flex;
/*align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。*/
align-items: center;
/*内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。*/
justify-content: center;
}
.box10 {
width: 30px; /*宽度可以省略*/
height: 30px; /*高度可以省略*/
background-color:yellow;
}
/*第六种方法：一般情况行内元素的水平垂直居中，将样式写在父元素就行*/
.box11{
width:100%;
height:100px;
background-color:#000000;
color:white;
text-align:center; /*行内元素水平居中*/
line-height:100px; /*行内元素垂直居中*/
}
.box11>a{
color:white;
text-decoration:none;
}
/*第七种方法：img元素有点特殊，它并不是单纯的行内元素，可以设置宽高*/
.box12 {
width: 100%;
height: 100px;
background-color: #000000;
text-align:center; /*img元素可以居中*/
line-height:140px; /*这里需要进行调整，因为img元素对齐的方式有点不一样*/
}
.box12>img{
width:50px;
}
/*第八种方法：行内元素转成块级元素*/
/*可以将图片转换为块级元素，然后利用块级元素进行调整*/
.box11 > img {
/*img只设置宽高中的一个属性，另一个会自动调整成原来比列，保证不变形*/
/*单位是%的话，会根据父元素进行调整*/
height: 50%;
display: block;
/*第二种方法*/
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
/*第九种方法：父元素使用display:table-cell*/
/*这个方法十分方便快捷，可以放心使用*/
.box13 {
width: 500px;
height: 150px;
background-color: antiquewhite;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box13>img{
height:50%;
}
/*第十种方法：给div设置text-align,给img设置transform，这样也能居中*/
.box14 {
width: 500px;
height: 150px;
background-color: antiquewhite;
text-align:center;
}
.box14 > img {
height: 50%;
/*vertical-align:150px; 这句话放在这没有起到作用*/
/*可以使用margin-top调整垂直位置，但是比较死板*/
/*margin-top:50px;*/
/*使用transform沿着Y轴移动50%，就能够垂直居中*/
transform:translateY(50%);
}
这里只尝试了div包一个div、div包一个img元素这两种情况，后续学习div包一个input的情况！
浙公网安备 33010602011771号