css让div水平垂直居中

Posted

tags:

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

示例1:

技术分享
.div1{
    width:200px;
    height:300px;
    border:1px solid #000;
    position: relative;
}
.div2{
    width: 40px;
    height:40px;
    background:green;
    position: absolute;
    margin: auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
示例1 css部分
技术分享
<div class="div1">
    <div class="div2">居中</div>
</div>
示例1 html部分

示例2:

技术分享
.div3{
    width:200px;
    height:300px;
    border:1px solid #000;
    display: table-cell;
    vertical-align: middle;
}
.div4{
    width: 40px;
    margin: 0 auto;
}
示例2 css部分
技术分享
<div class="div3">
    <div class="div4">居中</div>
</div>
示例2 html部分

 

以上是关于css让div水平垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

如何使文字在div中水平和垂直居中的css代码

如何让DIV里面的DIV水平垂直居中

让DIV水平和垂直居中的几种方法

让DIV水平和垂直居中的几种方法

怎样让div的内容水平垂直居中

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中