web前端开发经常用到的就是使元素在容器里面进行水平垂直居中。相对于垂直居中来说，水平居中或许比较容易。如果是块级元素直接设置其margin:auto即可完成水平居中；如果是内联元素，可以通过display:inline-block(display:block)变成块级元素再进行设置margin值或者通过text-align:center即可使水平居中。若是垂直居中，如果是内联元素，可以设置vertical-align:middle可以使其垂直居中(前提是父容器里面只有一个子元素才生效)。所以下面在平时总结了以下几种垂直居中的方法。
- 最常用的方法，也是日常web前端开发中用得最多的通过设置line-height属性与当前元素的高度值一致，但是缺点就是目前的元素的高度必须设置为固定值，没有了更多的灵活性，先举个例子demo(下面举例的html结构类似):
// html结构
<div class="parent">
demo
</div>
// css样式使文本元素垂直水平居中
div.parent{
width:100px;
height:100px;
vertical-align:middle;
line-height:100px;
}
- 通过绝对定位元素来使元素进行垂直水平居中，缺点就是子元素必须设置固定的宽度高度值且会以最近的一个设置posiiton为relative的父元素进行定位，如果没有这样的父元素，就以body文档为定位:
// html结构
<div class="parent">
<div class="child">demo</div>
</div>
// css样式
div.parent{
position:relative;
width:200px;
height:200px;
}
div.child{
position:absolute;
width:100px;
height:100px;
margin:auto;
left:0;
top:0;
bottom:0;
right:0;
}
- 通过table-cell方法进行定位居中，父元素设置宽高度即可：
// html结构
<div class="parent">
<div class="child">demo</div>
</div>
// css样式
div.parent{
display:table;
}
div.child{
display:table-cell;
text-aglin:center;
vertical-align:middle;
}
- 通过CSS3的弹性盒子模型flex进行布局定位:
// html结构
<div class="parent">
<div class="child">demo</div>
</div>
// css样式
div.parent{
width:100%;
height:200px;
display:flex;
justify-content:center;
align-items:center;
}
// 或者直接设置子元素
div.parent{
width:100%;
height:200px;
display:flex;
justify-content:center;
}
div.child{
align-self:center;
}
- 通过flex的旧版本进行水平垂直居中对齐(其中box-orient类似于新版的flex-direction)：
// html结构
<div class="parent">
<div class="child">demo</div>
</div>
// css样式
div.parent{
width:100%;
height:200px;
display:box;
box-align:center;
box-pack:center;
}
- 通过绝对定位absolute加margin负值进行居中对齐:
// html结构
<div class="parent">
<div class="child">demo</div>
</div>
// css样式
div.parent{
width:100px;
height:100px;
position:relative;
}
div.child{
position:absolute;
top:50%;
left:50%;
right:auto;
bottom:auto;
width:50px;
height:50px;
margin-left:-25px;
margin-top:-25px;
}
- 7.通过CSS3的transform属性的位移值translate来进行水平垂直居中
// html结构
<div class="parent">
<div class="child">demo</div>
</div>
// css样式
div.parent{
width:100px;
height:100px;
position:relative;
}
div.child{
position:absolute;
top:50%;
left:50%;
right:auto;
bottom:auto;
width:50px;
height:50px;
transform:translate(-50%,-50%);
}
- 8.利用上层元素的浮动来进行垂直居中:
// html结构
<div class="content"></div>
<div class="next">demo</div>
// css样式
div.content{
height:50%;
float:left；
margin-bottom:-120px;
}
div.next{
clear:both;
height:240px;
position:relative;
}
暂时可以想到与可以总结到的有这几种方法，如果有其他的水平垂直居中的方法，欢迎提出。如果有出入，欢迎提出错误所在。
