css 垂直居中的一些方法

Posted 小车厂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 垂直居中的一些方法相关的知识,希望对你有一定的参考价值。

总结:

方法一:

#main {

    margin: 0 auto;

    width: 100px;

    height: 100px;

    background-color: #000;

}

/*利用margin的水平方向上auto属性设置为自动使#main居中显示,#main需为块级元素而且必须指定宽度,背景是为了展示居中效果*/

 

方法二:

为#main添加一个父元素div

html

<div id=”#main-parent”>

    <div id=”#main”></div>

</div>

 

Css:

#main-parent {

    text-align: center;

}

#main {

    display: inline-block;

    width: 100px;

    height: 100px;

    background-color: #000;

}

将其父元素#main-parent设置文本居中属性text-align:center,再将#main设置为行内块元素inline-block显示,也可以实现居中

 

方法三:使用绝对定位

#main {

    width: 100px;

    height: 100px;

    position: absolute;

    top: 0;

    left: 50%;

    margin-left: -50px;

    /*也可以这样*/

    /*-webkit-transform: translateX(-50%);*/

    /*-moz-transform: translateX(-50%);*/

    /*-ms-transform: translateX(-50%);*/

    /*-o-transform: translateX(-50%);*/

    /*transform: translateX(-50%);*/

}

 

方法四:使用flex布局

给#main添加父元素#main-parent,使其flex布局

#main-parent {

    display: flex;

    width: 1000px;

teight: 500px;

tustify-content: space-around;/*子元素水平居中*/

align-items: center; /*子元素垂直居中*/

}

以上是关于css 垂直居中的一些方法的主要内容,如果未能解决你的问题,请参考以下文章

CSS实现垂直居中的5种方法

CSS实现垂直居中的5种方法

css 垂直居中的一些方法

实现垂直居中 5 种方法

CSS实现垂直居中的7种方法

CSS水平居中+垂直居中+水平/垂直居中的方法总结