居中大法

水平居中

1. 行内元素水平居中
   给它的父级元素设置

text-align:center;

2. 块级元素水平居中
   给该元素设置margin值

margin:0 auto;

3. 子元素有浮动
   对父元素进行特殊设置

width:fit-content;
margin:0 auto;

4. 使用弹性盒子（老版本）
   对父元素进行设置

display:box;//声明弹性盒模型
box-orient:horizontal;//确定子元素方向，horizontal水平,vertical垂直
box-pack:center;//盒子内部剩余空间对齐表现

5. 使用弹性盒子（新版本）
   对父元素进行设置

display:flex;
flex-direction:row;//设置主轴方向
just-content:center;//主轴方向空间对齐方式

6. transform方法
   父元素的position设置为relative,对子元素进行设置

position:absolute;
left:50%;
transform:translateX(-50%);//或translate(-50%,0)

7. margin-left 负值
   父元素的position设置为relative,对子元素进行设置

position:absolute;
left:50%;
margin-left:-子元素宽度一半；

8. 子元素绝对定位
   对子元素进行设置

position:absolute;
top:0;
bottom:0;
left:0;
right:0
margin:0 auto;

垂直居中

1. 单文本内容

line-height:100px;//line-height==父元素高度值

2. 行内块级元素（即display为inline-block）
   为父元素添加伪类

.parent ::after{
content:"";
height:100%;
}
.parent ::after, .son{
display:inline-block;
vertical-align:middle;
}

3. 子元素以表格形式渲染
   父元素display设置为table，再设置子元素

display:table-cell;
vertical-align:middle;

4. flex布局
   设置父元素

display:box;
box-orient:vertical;
box-pack:center;

5. flex布局
   设置父元素

display:flex;
flex-direction:column;
align-center:center;

6. margin负半值
   父元素position：relative，再设置子元素

position:absolute;
top:50%;
height:固定值；
margin-top: -高度的一半；

7. 子元素相对定位
   父元素position：relative，再设置子元素

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto 0;

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

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

水平垂直居中

1. 对于文本图片

line-height:高度；
tex-align:center;

2. 定宽定高
   父元素为position：relative,再对子元素进行设置

position:absolute;
left:50%;
top:50%;
margin-left:-宽度一半；
margin-top：-高度一半；

3. 绝对定位+margin法
   对子元素进行设置

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

4. 使用js动态计算
   水平居中元素应设置为绝对定位,获取元素的位置,距离浏览器左边，上边的距离,并且进行赋值
   left:(浏览器的宽度-元素的宽度)/2
   top:(浏览器的高度-元素的高度)/2

var oBox=document.getElementById("box"),
      left=(document.documentElement.clientWidth-oBox.offsetWidth)/2,
      top = (document.documentElement.clientHeight)/2;
      oBox.style.left = left+"px";
      oBox.style.top = top+"px";

5. 使用jQuery实现元素的水平垂直居中
   获取元素
   获取浏览器可视宽度$(window).width();
   获取浏览器可视高度$(window).height();
   元素距离浏览器左边的距离left:($(window).width()-元素.width())/2
   元素距离浏览器上边的距离top:($(window).height()-元素.height())/2
   resize:当调整浏览器窗口的大小时，发生 resize 事件

var oBox = $("#box"),
       oW = $(window).width(),   //获取浏览器的可视宽度
       oH  = $(window).height(), //获取浏览器的可视高度
       l = (oW-oBox.width())/2,  // 元素距离浏览器左边的距离
       t = (oH-oBox.height())/2; //元素距离浏览器右边的距离
       oBox.css({                    //赋值操作,left,top值
           left:l,
           top:t
        });