逆战-CSS中子元素在父元素中的4种水平垂直居中方法

 

子元素在父元素中的四种水平垂直居方式

方法如下：

例如：前三种方式网页如下

 

 

 

方式一：定位+margin:auto

.box{
   width: 500px;
   height: 500px;
   background: red;
   position: relative;
 }
.con{
   width: 200px;
   height: 200px;
   background: pink;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
 }

优点：兼容性较好，缺点:不支持IE7以下的浏览器。

方式二：定位+margin-left+margin-top

.box{
   width: 500px;
   height: 500px;
   background: red;
   position: relative;
 }
.con{
   width: 200px;
   height: 200px;
   background: pink;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -100px;
   margin-top: -100px;
 }

优点：兼容性好;缺点:必须首先要知道子元素的宽高。

 

方式三：line-height+display:inline

.box{
   width: 500px;
   height: 500px;
   line-height: 500px;
   text-align: center;
   background: red;
 }
.con{
   display: inline;
   background: pink;
 }
优点：常用于单行文本的居中，兼容性较强，代码比较简洁;缺点:子元素必须是内联元素，局限性较强。



方式四：text-align:center+vertical-align:middle+display:inline-block

网页如下：

 

 

    .box {

        width: 500px;

        height: 500px;

        background: red;

        text-align: center;

      }

     .con {

        display: inline-block;

        width: 200px;

        height: 200px;

        background: pink;

        vertical-align: middle;

      }

      .bc{

        display: inline-block;

        width: 0;

        height: 100%;

        vertical-align: middle;

      }

优点：能实现子元素的居中；缺点：代码量较多，子元素必须是行内块元素且必须有一个“标尺”作为参照才能实现居中效果，一般不建议使用此种方法。