Css 实现水平垂直居中的方法

目录

• 前言：
• 实现：
  • • 方案一：
    • 方案二：
    • 方案三
    • 方案四

前言：

其实在前端类别中，已经将实现水平垂直居中的方法列举了出来，这里仍将这几种方法提出来的理由是：“认为这个知识点比较重要，也是本人较为健忘”。

实现：

方案一：

关键词:绝对定位，margin:auto

.box{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto; //自适应
}

方案二：

关键词：绝对定位，负像素

.box{
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-top:-100px;//高度的一半
margin-left:-100px;//宽度的一半
}

方案三

关键词:CSS3，transform，绝对定位
这是方案二的一个变形写法

.box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

方案四

关键词：弹性布局，center

.box{
display:flex;//设置为弹性布局
justify-content:center; //水平居中
align-items:center; //垂直居中
}