css的垂直居中常用几种方法
父元素样式
.father{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
子元素垂直居中方法一
子元素要是块
relative/absolute+top50%+maringTop(-div一半高度)
.son{
width: 400px;
height: 400px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top:-200px;
}
子元素垂直居中方法二
relative/absolute+top50%+translateY(-50%)一半高度
子元素要是块
.son{
width: 400px;
height: 400px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
}
子元素垂直居中方法三
给父元素设置内容
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
开源中国博客地址:https://my.oschina.net/u/2998098/blog/1540520