css设置垂直居中多种方法
的有关信息介绍如下:在前端开发中内容居中是必不可少的,让我们一起来看一些垂直居中的方案有那么些吧。
文本内容设置垂直居中。
单行文本, 则可设置 line-height 等于父元素高度。
居中代码:
.text{
line-height: 50px;
}
行内块级元素设置垂直居中。
居中需要试用到 display: inline-block, vertical-align: middle和攀炼阅一个伪元素让内容块处于容器中央。
代码:
.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>
鉴川
大家好
试用 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%);
}