如何让元素居中

1、让文本左右居中  text-align：center  若想让文本上下左右居中则需加上 line-height:height的大小，这里使用百分比没有用

2、让div左右居中 margin:0 auto

3、让div上下左右居中

<div class="main">
    <div class="middle">
        上下左右居中
    </div>
</div>

.main{
    width:500px;
    height:300px;
    /*padding:20px;*/
    display: flex;
    border:1px solid red;
}
.middle{
    width:200px;
    height:200px;
    margin:auto;
    border:1px solid blue;

}
效果如下：

 4、让div显示在窗口中心

<div class="center">
    <div class="test">
        test
    </div>
</div>

.center{
    position: relative;
    width:500px;
    height:300px;
    margin-left: 200px;
    margin-top: 200px;
}
.test{
    position: fixed;
    width:300px;
    height:200px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left: -100px;
    border:1px solid blue;
}