首页手记 css垂直居中的3种方法

css垂直居中的3种方法

标签：

Html/CSS Html5 CSS3

1、文本内容设置垂直居中。

单行文本, 则可设置 line-height 等于父元素高度。
居中代码：

.text{
line-height: 50px;
}

2、行内块级元素设置垂直居中。
居中需要试用到 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>

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%);
}

点击查看更多内容