Posted in HTML / CSS onJuly 06, 2015
大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了,但是垂直居中却没有相应的css属性来设置,而如果要设置元素能够垂直居中必须得将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
通过CSS3的transform来实现
CSS Code复制内容到剪贴板
- .center-vertical {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
- .center-horizontal {
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- }
CSS中垂直居中的简单实现方法
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@