定位和居中

一. 通用的水平居中

   margin:0px auto;

二.  子元素宽高固定的  水平垂直居中

1.  方法1：子元素先绝对定位,top和left均为50%(父元素),后margin的top和left负向填补子元素的50%(需要具体PX值).
<div class="container">    <div class="box1">子元素1(宽高固定)水平和垂直居中.</div></div>
.container{
    position: relative;/*子元素为了居中,使用绝对定位,因此父元素要相对定位*/
}
.box1{
    width: 100px;
    height: 100px;
    border: 1px solid green;
    position: absolute;
    top: 50%;    /*50%是父元素的50%*/
    left: 50%;
    margin-top: -50px;  /*由于父元素的50%定位过多,因此需要margin往回调.调节数量为子元素宽高的一半.*/
    margin-left: -50px; /*注意,此处不能使用50%,因为%是相对于父元素的50%,而不是子元素*/
}
2. 方法2： 子元素先margin,top和left均为50%(父元素),后子元素相对定位,top和left负向填补子元素的50%(需要具体PX值).
<div class="container">    <div class="box2">子元素2(宽高固定)水平和垂直居中.</div></div>
.box2{
    width: 100px;
    height: 100px;
    border: 1px solid green;
    margin-top: 50%;  /*由于父元素的50%定位过多,因此需要margin往回调.调节数量为子元素宽高的一半.*/
    margin-left: 50%; /*注意,此处不能使用50%,因为%是相对于父元素的50%,而不是子元素*/
    position: relative;
    top:-50px;
    left: -50px;
}

3. 方法3:子元素先绝对定位,top和left均为50%(父元素),后使用transform: translate(-50%,-50%)负向移动子元素的宽高的50%.
<div class="container">    <div class="box3">子元素3(宽高固定)水平和垂直居中.</div></div>

.container{
    position: relative;/*子元素为了居中,使用绝对定位,因此父元素要相对定位*/
}
.box3{
    width: 100px;
    height: 100px;
    border: 1px solid green;
    position: absolute;
    top: 50%;    /*50%是父元素的50%*/
    left: 50%;
    transform: translate(-50%,-50%);/*translate中的50%为子元素的50% */
}
4. 方法4:父元素设置display:flex布局,且父元素设置justify-content和align-items为center.
<div class="flex-parent">    <div class="box4">子元素4(宽高固定)水平和垂直居中.</div></div>
.flex-parent{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;        /*父元素使用flex布局*/
    display:-webkit-flex; /*针对webkit的浏览器*/
    justify-content: center;/*使子元素水平居中*/
    align-items: center; /*使子元素垂直居中*/
}
.box4{
    border: 1px solid green;
    width: 100px;
    height: 100px;
}

三. 子元素不定宽高的  水平垂直居中

1. 方法1: 子元素绝对定位+transform: translate(-50%,-50%).
<div class="container">    <div class="box5">子元素5(宽高不定)水平和垂直居中.</div></div>

.container{
    position: relative;/*子元素为了居中,使用绝对定位,因此父元素要相对定位*/
}
 
 

  
  

 
 
.box5{
    border: 1px solid green;
    position: absolute;
    top: 50%;    /*50%是父元素的50%*/
    left: 50%;
    transform: translate(-50%,-50%);/*translate中的50%为子元素的50% */
}
2. 方法2:父元素设置display:flex布局,且父元素设置justify-content和align-items为center.
<div class="flex-parent">    <div class="box6">子元素6(宽高不定)水平和垂直居中.</div></div>

.flex-parent{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;  /*注意,子元素要使用flex:num 属性*/
    display:-webkit-flex; /*针对webkit的浏览器*/
    justify-content: center;/*使子元素水平居中*/
    align-items: center; /*使子元素垂直居中*/
}
.box6{
    border: 1px solid green;
}

注意：

1. 当使用margin:0px auto后，再写position:absolute; top:50%; 无法达到水平和垂直同时居中的效果。

  因为绝对定位后没有写left的值，则默认为left为0.则盒子直接定位到左侧，而不是居中。

   因此若使用绝对定位，应水平和垂直均采用绝对定位方法来实现居中。