css label 居中布局_css-水平居中、垂直居中、水平垂直居中方法

首先呢先介绍下居中的方法都有哪些？

1.文字水平垂直居中代码片段

<!-- html部分 -->
    <div class="center">文字水平垂直居中</div>
/* css部分 */
        .center{
            text-align: center;
            width: 300px;
            height: 200px;
            background: indianred;
            line-height: 200px;
        }

2.行内元素水平居中

//html部分：
<div class="center">水平居中</div>
/* css部分 */
       .center{
            text-align: center;
       }

3.块级元素水平居中

1.定宽元素水平居中

只需给需要局中的块级元素加margin：0 auto，
但这里需要注意的是，这里的块元素的宽度width值要有

html部分
<div class="center">水平居中</div>
css部分
.center{
    width:200px;
  magin: 0 auto;
  border:1px solid red;
}

1.2.不定宽块级元素水平居中

不定宽，就是块级元素宽度不固定
方法1：设置table，通过给要居中显示的元素，
设置display：table，然后设置margin：0 auto来实现

<!-- html部分 -->
    <div class="center">水平居中</div>
/* css部分 */
       .center{
            display: table;
            margin: 0 auto;
            border: 1px solid red;
        }

1.3.设置inlie-block（多个块元素）

子元素设置inline-block,同时父元素设置text-align：center

<!-- html部分 -->
    <div class="center">
        <div class="inlineblock-div">1</div>
        <div class