首先来创建一个html页面，html代码和css代码如下：

效果图：

接下来我们就在这个基础上，对红色方框的元素标签进行水平垂直居中的操作

[](()第一种方法

---

第一种方法我强烈推荐，用到了我们熟悉的flex布局 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 。

• 元素标签内容

• 样式内容

.box{

width: 600px;

height: 300px;

background: lightgreen;

/以下三个样式就能实现水平垂直居中/

display: flex; /先开启flex布局/

justify-content: center; /实现水平居中/

align-items: center; /实现垂直居中/

}

.content{

background: red;

}

• 效果图

是不是非常的方便呢？只需要三个在外部元素标签设置三个样式就能实现内部元素的水平垂直居中。

[](()第二种方法

---

第二种方法运用的就是定位和transform的知识来实现水平垂直居中

• 元素标签内容

我是box中的内容