前端CSS关于居中的小技巧

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

例如：

 

 

 html源码展示：

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

CSS源码展示

 1 #HMDYH {
 2     width: 560px;
 3     height: 100px;
 4     border: 1px initial #000000;
 5     background-color: yellow;
 6     text-align: center;
 7     line-height:100px;
 8     vertical-align: middle;
 9     font-weight: bolder;
10     font-size: 30px;
11 }

 

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

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

1 .className{
2     Position: absolute;
3     left: 0;
4     right: 0;
5     top: 0;
6     bottom: 0;
7     margin: auto;
8     position: fixed;//用于在固定当前位置
9 }

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

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

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

1 .className{
2     Position: absolute;
3     left: 0;
4     right: 0;
5     top: 0;
6     bottom: 0;
7     margin: auto;
8 }