css两种经常使用的不定宽高的水平垂直居中方法，记住它，再也不为样式发愁

css 几种经常使用的简单容易记住的水平垂直居中方法

• 前言
• 正文
• 第一种方法
• 第二种方法
• 结束语

前言

咱们在设计网页时，会大量的运用到水平垂直居中，若是知道元素的宽高，那水平垂直居中是很简单的，无非是用一下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>

效果图：

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

第一种方法

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

• 元素标签内容

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

• 样式内容

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

• 效果图
  
  是否是很是的方便呢？只须要三个在外部元素标签设置三个样式就能实现内部元素的水平垂直居中。

第二种方法

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

• 元素标签内容

<div class="box">
  	<span class="content">我是box中的内容</span>
</div>

• 样式内容

.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%,即完成了*/
}

• 效果图
  
  一样的，跟第一种方式的效果同样，也完成了水平和垂直的居中。

结束语

这里只向你们介绍了两种我我的认为经常使用并且方便记住的方法，尤为是第一种方法，是我用的最最最最多的，但愿这篇文章能帮助大家解决不定宽高元素水平垂直居中的问题。