css怎么实现垂直居中
2017-03-12 本文已影响75人
小m_up
这两天准备找实习，然后我自己面试和同学面试都会问到这个问题，所以我就整理了一下。
那么就先写一个HTML：
<body>
<div id="backgroud">
<div id="vertical">
hello world!
</div>
</div>
</body>
那么怎么让hello world!居中呢？下面是几种方法：
display:table
#backgroud{
display: table;
width: 250px;
height: 100px;
background-color:grey;
}
#vertical{
display: table-cell;
vertical-align: middle;
}
给父元素使用display:table，那么此元素会作为块级表格来显示（类似 <table>)，然后再给要居中的部分设置display:table-cell，那么此元素会作为一个表格单元格显示;然后再使用vertical-align: middle使其在父元素中垂直居中显示。
transform
#backgroud{
width: 250px;
height: 100px;
background-color:grey;
}
#vertical{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);/* 或者 try 50% */
}
transform是css3的新属性，使用它的translateY表示在Y轴上移动。
Flexbox
使用FLex的时候有两种方法：
- 给父元素加Flex布局：
#backgroud{
width: 250px;
height: 100px;
background-color:grey;
display:flex;
align-items:center;
}
display:flex表示该元素使用的是flex布局，align-items:center定义项目在交叉轴上以中心对齐。
- 给子元素加Flex布局：
#backgroud{
width: 250px;
height: 100px;
background-color:grey;
}
#vertical{
display:flex;
align-items:center;
min-height:100%;
}
子元素加Flex布局的时候，主要是加了min-height:100%，意思是对元素的高度设置一个最低限制，然后给它设置相对与父元素最小高度是100%，其实和给父元素加FLex是一样的。
以上是我自己总结的方法，欢迎大家补充。
