CSS中垂直居中的简单实现方法

Adalia ·
更新时间:2024-11-10
· 926 次阅读

大家都知道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

需要 登录 后方可回复, 如果你还没有账号请 注册新账号