行内元素和块级元素的居中

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;

最后

以上就是甜美菠萝为你收集整理的行内元素和块级元素的居中的全部内容，希望文章能够帮你解决行内元素和块级元素的居中所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。