1.水平居中:
(1)行内元素:
对该行内元素的父元素设置text-align:center
(2)块级元素:
对该块级元素设置margin:0 auto
(3)弹性盒子中的水平居中:
将某元素定义为弹性盒子:display:flex;
然后在水平方向居中盒子内的元素:justify-content:center;
2.垂直居中:
(1)行内元素:
方法一:对该行内元素的父元素设置line-height与height相同:比如父元素div的height为50px,则设置:
div {
height: 50px;
inline-height:50px;
}
方法二:设置行内元素vertical-align:middle
(2)块级元素:
a) 情形一:父元素div设置了宽度:
div{width:100px}
div p{
margin:0 auto;
height:30px;
line-height:30px;
}
b) 情形二:父元素并未设置宽度或者宽度为百分比
方法一:
#fatherdiv {
background-color: #000000;
width: 100%;
height: 100vh;
position: relative;
font-family: PingFang SC;
}
#childdiv {
width: 90%;
height: 90%;
position: absolute;
margin: auto;
top: 0;left: 0; right: 0; bottom: 0;
background-color: #235237;
}
方法二:使用transform:
#fatherdiv {
background-color: #000000;
width: 100%;
height: 100vh;
position: relative;
font-family: PingFang SC;
}
#childdiv {
width: 90%;
height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #235237;
}
(3)弹性盒子中的垂直居中:
将某元素定义为弹性盒子:display:flex;
然后在水平方向居中盒子内的元素:align-items:center;