在前端开发中内容居中是必不可少的,让我们一起来看一些垂直居中的方案有那么些吧。
方法/步骤
1
文本内容设置垂直居中。单行文本, 则可设置 line-height 等于父元素高度。居中代码:.text{ line-height: 50px; }
2
行内块级元素设置垂直居中。居中需要试用到 display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。代码:
大家好
3
试用 transform 设置元素垂直水平居中。设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
上一篇:CSS垂直居中的方法