垂直水平居中

垂直水平居中

一、确定宽高

1、absolute + 负margin

.way3 {
    position: relative;
}
.way3 img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -70px;
}

2、absolute + margin auto

.wp {
    position: relative;
}
.box {
    width: 200px;
    height: 140px;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

3、absolute + calc

• 用于动态计算长度值。
• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

.way6 {
    position: relative;
    width: 250px;
    height: 250px;
}

.way6 img {
    width: 200px;
    height: 140px;
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 70px);
}

二、不确定宽高

1、absolute + transform(x, y)

.way5 {
    position: relative;
    width: 850px;
    height: 850px;
}
.way5 img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2、lineheight

<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;    /*注意*/  
}

3、writing-mode

writing-mode：改变文字的显示方向；
更神奇的是所有水平方向上的css属性，都会变为垂直方向上的属性，比如text-align；
通过writing-mode和text-align就可以做到水平和垂直方向的居中了，只不过要稍微麻烦一点。

<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>

.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

4、flex

.way {
    width: 850px;
    height: 850px;
    display: flex;
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}

5、grid

css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

6、display:table-cell;

<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

水平居中

1、行内元素水平居中

text-align:center;------对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

 .way {
     text-align: center;
}

2、块级元素的水平居中

margin:0 auto------居中的元素必须是块级元素

.way2 img {
    display: block;
    margin: 0 auto;
}

3、不定宽的浮动元素

通过父子容器都相对定位，注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素；偏移位移见下图：

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>

.box{
   float:left;
   position:relative;
   left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}