css 垂直居中_css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁...-CSDN博客

喜欢就点击蓝字关注我们吧！

我们在设计网页时，会大量的运用到水平垂直居中，如果知道元素的宽高，那水平垂直居中是很简单的，无非是用一下margin就可以完成，这里就不向大家做过多的解释了。但是，如果不知道元素的宽高呢？是不是就会在这上面用点心思了，接下来我给大家介绍两种我设计网页时常用的两种不定宽高的元素水平居中方法吧，放心绝对容易记。

基础布局

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

<div class="box">     <div class="content">我是box中的内容div>div><style>  .box{     width: 600px;     height: 300px;     background: lightgreen;  }  .content{     background: red;  }style>

效果图：

我们可以看到，box内的内容是没有设置宽高的，这就叫做不定高，大家知道如何对其进行垂直水平居中吗？接下来我们就在这个基础上，对红色方框的元素标签进行水平垂直居中的操作

第一种方法

第一种方法我强烈推荐，用到了我们熟悉的flex布局。

元素标签内容

class="box">

class="content">我是box中的内容

样式内容

.box{    width: 600px;    height: 300px;    background: lightgreen;  /*以下三个样式就能实现水平垂直居中*/    display: flex;                 /*先开启flex布局*/    justify-content: center;       /*实现水平居中*/    align-items: center;           /*实现垂直居中*/}.content{    background: red;}

效果图

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

第二种方法

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

元素标签内容

class="box"> class="content">我是box中的内容

样式内容

.box{   width: 600px;   height: 300px;   background: lightgreen;   position: relative;        /*外部元素开启relative定位*/}.content{   background: red;   position: absolute;       /*内部元素开启absolute定位*/   top: 50%;                 /*向下移动父级高度的50%*/   left: 50%;                /*向右移动父级宽度的50%*/   transform: translate(-50%, -50%);  /*向上、向左移动自身高度、宽度的50%,即完成了*/}