css之垂直水平居中

参考链接：http://dengdongxia.com/2018/05/13/2018-05-13-Css-horizontal-centering-method/

1、对于行内元素

text-align:center;

图片说明

2、对于确定宽度的块级元素

1、margin和width实现水平居中

常用（前提是：已设置width值）:
margin-left:auto;
margin-right:auto;

2、绝对定位和margin-left：（-宽度值/2）实现水平居中

固定宽度块级元素水平居中，通过使用绝对定位，以及设置margin-left为其宽度的一半
图片说明

3、定宽，绝对定位

left：0
right：0；
top：0
bottom：0
margin：auto；

未知宽度的块级元素

1.table标签配合margin左右auto实现水平居中
2.inline-block和text-align
3.绝对定位实现水平居中
绝对定位+transform，translateX可以移动本省元素的50%

.content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 移动元素本身50% */
  background: aqua;

}

4.相对定位实现水平居中
用float或者display把父元素变为行内块状元素。

.contentParent{

  display: inline-block; /* 把父元素转化为行内块状元素 */

  /*float: left; 把父元素转化为行内块状元素 */

  position: relative;

  left: 50%;

}

/*目标元素*/

.content{

  position: relative;

  right: 50%;

  background-color:aqua;

}

5.flex

.contentParent{

  display: flex;

  flex-direction: column;

}

.content{

  align-self:center;

}

或者

.contentParent{

  display: flex;

}

.content{

  margin: auto;

}

6.
图片说明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 行内 -->
    <div class="hangnei1">
        <span class="hangnei">
            asd
        </span>
    </div>
    <!-- 定宽块级 -->
    <!-- 方法1. margin为auto-->
    <div class="dingkuan1">
        abcdefg
    </div>
    <!-- 方法2.绝对定位+left:50%+margin-left为负的自身宽度一半 -->
    <div class="dingkuan2">
        abcdefg
    </div>

    <!-- 方法3，绝对定位，左右设为0，margin auto -->
    <div class="dingkuan3">
        abcdefg
    </div>

    <!-- 不定宽 -->
    <!-- 方法1，绝对定位，left 50%，tranform -->
    <div class="buding1">
        asdc
    </div>
    <!-- 方法2： -->
    <div class="fu2">
        <div class="buding2">
            as
        </div>
    </div>
    <div class="fu3">
        <div class="buding3">
            as
        </div>
    </div>
    <div class="fu4">
        <div class="buding4">
            as
        </div>
    </div>

</body>
<style>
    /* 行内元素的话，父元素设置text-align */
    .hangnei1 {
        width: 100px;
        height: 100px;
        background-color: aqua;
        text-align: center;
    }

    /* 定宽方法1 ,直接设margin左右为auto*/
    .dingkuan1 {
        width: 100px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        background-color: blue;
    }

    /* 定宽方法2 */
    .dingkuan2 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        /* left会使元素左边框在中间 */
        left: 50%;
        /* 让其左移一半的宽度 */
        margin-left: -50px;
    }

    .dingkuan3 {
        width: 100px;
        height: 100px;
        position: absolute;
        /* top: 0;
        bottom: 0; */
        left: 0;
        right: 0;
        margin: auto;
        background-color: brown;

        /* 没用的，只是为了布局*/
        margin-top: 100px;
    }

    /* 不定宽 */
    /* 方法1 */
    .buding1 {
        background-color: cornsilk;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

    }

    /* 方法2 */
    .fu2 {
        display: inline-block;
        position: relative;
        left: 50%;
    }

    .buding2 {
        position: relative;
        right: 50%;
        background-color: cyan;

        /* 没用的 */
        margin-bottom: 200px;
    }

    /* 方法3 */
    .fu3{
        /* 以列为书写格式 */
        display: flex;
        flex-direction: column;
        align-items: center;

    }
    .buding3 {
        /* 允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性 */
        /* align-self:center; */
        background-color: darkblue;
    }
    /* 方法4 */
    .fu4{
        display: flex;
    }
    .buding4{
        background-color: darkgray;
        margin:auto;
    }
</style>

</html>