CSS实现元素垂直居中的几种方法

网页前端经常需要把元素垂直居中,下面总结几种方法。

1、不知道元素高度,利用定位和CSS属性transform实现元素垂直居中:

代码一:

parentElement{
	position:relative;
}

childElement{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

代码二:

parentElement{
	height:xxx;
}

.childElement {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

position:absolute;和position:relative;根据情况运用;

2、知道元素高度,利用定位和margin实现元素垂直居中:

parentElement{
	position:relative;
}

childElement{
	height:200px;
	position: absolute;
	top: 50%;
	margin-top:-100px;
}

3、不考虑兼容老式浏览器,利用 Flex 布局:

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

4、利用display:table;表格框类型

parentElement{
	display:table;
	width:100%;
}

childElement{
	display:table-cell;
	verticle-align:middle;
}
关键词: css

网友留言(0条)

发表评论