前端CSS关于居中的小技巧

1.第一种情况：文字在DIV中垂直水平居中小技巧

例如：

 

 

 html源码展示：

<div id="HMDYH">
    黑名單用戶
</div>

CSS源码展示

#HMDYH {
    width: 560px;
    height: 100px;
    border: 1px initial #000000;
    background-color: yellow;
    text-align: center;
    line-height:100px;
    vertical-align: middle;
    font-weight: bolder;
    font-size: 30px;
}

 

后面就不写的太详细，简单展示重点CSS部分

2.第二种情况：div居中显示于电脑屏幕方法

.className{
    Position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: fixed;//用于在固定当前位置
}

3.第三种情况：DIV水平垂直居中父级DIV方法

父级div必须使用相对定位：position：relative；

需要居中的div使用绝对定位：

.className{
    Position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}