示例：
<div class="md-warp">
<span class="md-main"></span>
</div>
.md-warp{
width: 400px;
height: 300px;
max-width: 100%;
border: 1px solid #000;
}
.md-main{
display: block;
width: 100px;
height: 100px;
background: #f00;
}
水平居中
margin法
需要满足三个条件
元素定宽
元素为块级元素或行内元素设置display:block
元素的margin:left或者margin-right都必须设置auto
三个条件缺一不可
.md-main{
margin: 0 auto
}
定位法
元素定宽
元素绝对定位，并设置left:50%;
+元素负做边距margin-left为宽度的一半
.md-wrap{
position:relative;
}
.md-main{
position:absolute;
left:50%;
margin-left:-50px
}
有些时候元素宽度不是固定的，依然可以使用定位法实现水平居中用到css3中的transform属性中的translate
.md-warp{
position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
}
文字水平居中
直接使用text-align:center即可
垂直居中
定位法
和水平居中类似，只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可
优点：能在各个浏览器下工作，结构简单明了，不需要增加额外的标签
.md-warp{
position: relative;
}
.md-main{
position: absolute;
/* 核心 */
top: 50%;
margin-top: -50px;
}
不确定高度的时候
.md-warp{
position: relative;
}
.md-main{
position: absolute;
top: 50%;
// 注意此时md-main不设置height为100px
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
单行文本垂直居中
需要满足两个条件：
元素内容是单行，并且其高度是固定不变的
将其line-height设置成height的值一样
div{
width: 400px;
height: 300px;
border: 1px solid #000;
}
span{
line-height: 300px;
}
视窗单位的解决办法
让元素在视窗中居中，使用vh实现
.md-warp{
position: relative;
}
.md-main{
position: absolute;
margin: 50vh auto 0;
transform: translateY(-50%);
}
Flexbox的解决方案
完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto
.md-wrap{
display:flex
}
.md-main{
display:auto
}
Flexbox的实现文本的水平垂直居中同样很简单
.md-warp{
display:flex;
}
.md-main{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
绝对垂直居中
.md-wrap{
position: relative;
}
.md-main{
position:absolute;
top:0'
right:0
bottom:0;
left:0;
margin:auto;
}
最好不要使用绝对定位，因为他对整体的布局影响相当的大