css设置垂直居中多种方法
在前端开发中内容居中是必不可少的，让我们一起来看一些垂直居中的方案有那么些吧。
操作方法
- 01
文本内容设置垂直居中。 单行文本, 则可设置 line-height 等于父元素高度。 居中代码： .text{ line-height: 50px; }
- 02
行内块级元素设置垂直居中。 居中需要试用到 display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ height: 300px; width: 500px; border:1px solid; text-align: center; } .parent::after,.son{ display:inline-block; vertical-align: middle; } .parent::after{ content:''; height:100%; } </style> </head> <body> <div class="parent"> <div class="son">大家好</div> </div> </body> </html>
- 03
试用 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%); }