垂直居中,水平居中，垂直+水平居中，圣杯和双飞翼布局

Posted 2020-09-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了垂直居中,水平居中，垂直+水平居中，圣杯和双飞翼布局相关的知识，希望对你有一定的参考价值。

一：先说一下行内元素和块级元素：

行内元素：a、img、input、label 、select、small、span、textarea ...

块级元素：div 、dl、h1、h2、form、 pre - 格式化文本、table 、ul、ol、p...

更多的介绍看这个：http://www.cnblogs.com/Jackie0714/p/4923639.html

二：水平居中：

1、有宽度和高度的块级元素一般都用margin：0 auto。行内元素的话，一般都是用text-align:center; /*文本水平居中,给父级元素设定*/。

2、若是子元素有浮动,为了让子元素水平居中,则可以让父元素宽度设置为fit-content,并且配合margin:0 auto。（目前只有chrome,firfox,Opera浏览器支持该属性值,并且只能实现水平居中,无法实现垂直居中,也没有height:fit-content,该属性,即使设置了也不生效）

<style type="text/css">
        ul,li{
            list-style:none;
        }
        .parent{
            width:100%;
            width:-moz-fit-content;
            width:-webkit-fit-content;
            width:fit-content;   /*父元素宽度设置fit-content,高度是没有这样的写法的*/
            margin:0 auto;     /*注意只设置得了水平居中,此方法,垂直居中无法*/
        }
        li{
            float:left;    /*子元素设置了浮动*/
            margin:0 5px 0;
        }
</style>
<body >
    <ul class="parent">
    <li>随笔川迹</li>
    <li>itclan</li>
    <li>个人简介</li>
    <li>联系地止</li>
    </ul>
</body>

3、使用flex布局,老版本:设置父元素display:box;(声明弹性盒模型)

<style type="text/css">
   .parent{
    /*声明弹性盒子模型*/
    display:-webkit-box;   
    /*用来确定子元素的方向,是横着的还是竖着的,horizontal是横着的 vertical是竖着*/
    -webkit-box-orient:horizontal; 
    /*决定盒子剩余空间的利用对齐方式,center表示居中*/
    -webkit-box-pack:center; 
    /*firefox*/
    display:-moz-box;
    -moz-box-orient:horizontal;
    -moz-box-pack:center;
    /*opera*/
    display:-o-box;
    -o-box-orient:horizontal;
    -o-box-pack:center;
    /*IE浏览器*/
    display:-ms-box;
    -ms-box-orient:horizontal;
    -ms-box-pack:center;
    /*标准浏览器*/
    display:box;
    box-orient:horizontal;
    box-pack:center;
}
.son{
    width:100px;
    height:100px;
    background:red;
}
</style>
<body >
    <div class="parent">
           <div class="son"></div>
    </div>
</body>

4、使用flex,新版本:设置父元素display:flex(声明弹性盒模型)

<style type="text/css">
 .parent{
    display:-webkit-flex;      /*声明弹性盒模型,定义弹性容器*/
    -webkit-flex-direction:row; /*row设置主轴方向为水平方向*/
    -webkit-justify-content:center; /*定义了在当前行上,弹性项目沿主轴如何排布*/
    display:flex; 
    flex-direction:row;
    justify-content:center;  /*相当于老版本的box-pack*/
}
.son{
    width:100px;
    height:100px;
    background:blue;
 }
</style>
<body >
  <div class="parent">
       <div class="son"></div>
 </div>

5、使用css3中新增的transform属性,子元素设置离x轴50%

<style type="text/css">
.parent{
    position:relative;  /*相对定位*/
}
.son{
    width:100px;
    height:100px;
    background:pink;
    position:absolute;
    left:50%;
    transform:translate(-50%,0);/*设置子元素transform:translate(-50%,0)*/
}
</style>
<body >
  <div class="parent">
       <div class="son"></div>
 </div>
</body>

6、元素使用绝对定位方式,以及负值的margin-left

<style type="text/css">
.parent{
    position:relative;
}
.son{
    width:100px;
    height:100px;
    position:absolute;
    left:50%;
    margin-left:-50px; /*-宽度/2*/
    background:green;
}
</style>
<body >
  <div class="parent">
       <div class="son"></div>
 </div>
</body>

7、子元素使用绝对定位方式,position:absolute以及top,left:0,right:0;bottom:0,属性值设置为0,margin:0 auto;

<style type="text/css">
.son{
    position:absolute;  /*设置绝对定位*/
    width:100px;        /*宽度固定*/
    height:100px;
    background:#abcdef;
    top:0;
    left:0;       /*设置top | left | right | bottom都等于0*/
    right:0;
    bottom:0;
    margin:0 auto;
}
</style>
<body >
  <div class="parent">
       <div class="son"></div>
 </div>
</body>

三：垂直居中。

1、若是单行文本内容,可以设置line-height等于父元素的高度

2、若是行内块级元素，也就是给它设置了display:inline-block属性,这种方法针对一些img等行内元素,比较常用,vertical-align:middle和一个伪元素内容块处于容器的中央,注意要给这个伪类高度设置高度100%，此方法在IE6下失效,IE,7,8,9有用,但是又在IE10,11又失效(IEText测的)，然而我测试的时候IE10、11也有用。

<style type="text/css">
.parent{
    width:500px;
    height:500px;
    border:1px solid red;
}
.parent::after, .son{        /*父级元素和子元素都设置display:inline-block*/
    display:inline-block;
    vertical-align: middle;   /*设置vertical-align:middle*/
}
.parent::after{   /*父元素添加一个伪类,并且设置高度100%*/ 
    content:"";
    height:100%;
}
img{
    border:1px solid blue;
    border-left:none;
}   
</style>
<body >
  <div class="parent">
       <img class="son" src="1501215158(1).png">
 </div>
</body>

3、子元素可用vertical-align:middle(使元素垂直对齐),和display:tab-cell(让元素以表格形式渲染),父元素使用display:table,让元素以表格的形式渲染

<style type="text/css">
.parent{
    display:table; /*让元素以表格形式渲染*/
    border:1px solid red;
    background:red;
    height:200px;
}
.son{
    display:table-cell; /*让元素以表格的单元表格形式渲染*/
    vertical-align:middle;/*使用元素的垂直对齐*/
    background:yellow;
} 
</style>
<body >
<div class="parent">
     <div class="son">contentcontentcontentcontentcontentcontentcontent</div>
 </div>
</body>

4、使用Flex布局,display:box(声明弹性盒模型),box-orient:vertical;(父元素设置,用来确定子元素的方向,垂直方向向的,竖着的,horizontal是横着的),box-pack:center;(决定盒子内部剩余空间的对齐表现,这里居中)

<style type="text/css">
.parent{
    height:400px;
    display:-webkit-box;  
    -webkit-box-align:center;
    display:box;
    box-align:center;
     border:1px solid red;
}
.son{
    width:100px;
    height:100px;
    background:yellow;
}
</style>
<body >
<div class="parent">
     <div class="son">1</div>
 </div>
</body>

5、使用Flex布局,display:flex(声明弹性盒模型),align-items:center(元素在侧轴中间位置,富裕空间在侧轴两侧)flex-direction:coluumn(设置主轴方向为垂直方向)。

<style type="text/css">
.parent{
    height:400px;
    /*display:-webkit-flex;  */
    display:flex;
    flex-direction: row;/*容器内项目的排列方向(默认横向排列),row表示沿水平主轴由左向右排列,column沿垂直主轴右上到下　*/
    align-items: center;  /*居中*/
    border:1px solid red;
}
.son{
    width:100px;
    height:100px;
    background:orange;
}
</style>
<body >
<div class="parent">
     <div class="son">1</div>
 </div>
</body>

6、设置父元素相对定位(position:relative),子元素设置绝对定位position:absolute,top:50%,height高度固定,利用margin负半值的方式，让元素垂直居中。（和水平居中相似）

7、设置父元素相对定位(position:relative),子元素设置绝对定位,margin:auto 0,高度固定,left | top | right | bottom都设置为0，但是在IE8低版本浏览器以下失效。

8、需要在居中元素前面放一个空块级元素(比如div)即可,然后设置这个div的高度为50%,margin-bottom为元素高度的一半,而且居中元素需要清除浮动,需要注意的是,使用这种方法,如果你的居中元素是放在body中的话,需要给html,body设置一个height:100%的属性。

<style type="text/css">
 html,body{height:100%;}
 .box{
        /*float:left;*/
        height:50%;  /*相对父元素的高度的50%*/
        margin-bottom:-120px;
}
.content{
        clear:both;/*清除浮动*/
        width:240px;
        height:240px;
        position:relative;/*只能用相对定位*/
        background:green;
}
</style>
<body >
 <div class="box"></div>
<div class="content">Content</div>
</body>

9、使用内边距的方式使其垂直居中（padding）。

四：水平+垂直居中：

1、若是文本图片,则可以使用line-height:高度；text-align:center。

2、若是定宽定高,使用绝对定位position:absolute,left:50%,top:50%,使用margin负半值进行元素的水平垂直居中显示。

<style type="text/css">
 html,body{height:100%;}
.parent{
  width:100%;
  height:500px;
  position:relative;
  background:red;
}
.son{
  width:100px;
  height:100px;
  background:pink;
  position:absolute;
  left:50%;
  top:50%;      /*top50%*/
      margin-left:-50px;/*-(元素宽度/2)*/
  margin-top:-50px; /*-(元素高度/2)*/
}
</style>
<body >
<div class="parent">
    <div class="son"></div>
</div>
</body>

3、绝对定位absolute+margin:auto,同时,top:0;left:0;right:0,bottom:0

.son{
    position:absolute;  /*设置绝对定位*/
    width:100px;        /*宽度固定*/
    height:100px;
    background:#abcdef;
    top:0;
    left:0;             /*设置top | left | right | bottom都等于0*/
    right:0;
    bottom:0;
    margin: auto;      /*水平垂直居中*/
}

五：

两种常见布局:圣杯布局(两边宽度固定,中间自适应)与双飞翼(等高)布局
- 圣杯(两边宽度固定,中间自适应)布局
  - 使用绝对定位实现圣杯布局
  - 使用浮动实现圣杯布局
  - 使用弹性盒模型Flex布局display-box实现圣杯布局
  - 利用弹性盒模型新版本display:flex实现圣杯布局
- 双飞翼(等高)布局
  - 一个盒子的内容变化,同样会影响同级(兄弟)高度变换,实时同步变化

六：更多详情 https://juejin.im/entry/59709539518825419f7b679e

以上是关于垂直居中,水平居中，垂直+水平居中，圣杯和双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章

CSS布局（圣杯布局双飞翼布局水平垂直居中）

div自适应水平垂直居中的方法

CSS网页布局基础-圣杯布局和双飞翼布局

CSS布局——水平垂直居中等分布局圣杯布局

实现div内容水平垂直居中