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="inlineblock-div">2</div>
    </div>
/* css部分 */
       .center{
            text-align: center;
        }
        .inlineblock-div{
            display: inline-block;
        }

1.4.设置flex布局

只需把要处理的块元素的父级设置display：flex，justify-content：center；

<!-- html部分 -->
    <div class="center">
        <div class="flex-div">1</div>
        <div class="flex-div">2</div>
    </div>
 /* css部分 */
       .center{
            display: flex;
            justify-content: center;
        }

2.垂直居中

2.1单行文本垂直居中

<!-- html部分方案一 -->
    <div class="center">
        123
    </div>
/* css部分方案一 */
       .center{
            padding-top:50px;
            padding-bottom:50px;
            background: indianred;
        }
 <!-- html部分方案二 -->
    <div class="center">
        123
    </div>
/* css部分方案二 */
       .center{
           width: 300px;
           height: 200px;
           line-height: 200px;
            background: indianred;
        }

2.2多行文本垂直居中

通过设置父元素table，子元素table-cell和vertical-align
vertical-align：middle的意思是把元素放在父元素的中部

<!-- html部分 -->
    <div class="center">
        <div class="table-div">多行文本垂直居中</div>
    </div>
 /* css部分 */
       .center{
           width: 300px;
           height: 200px;
           display: table;
            border: 2px solid blue;
        }
        .table-div{
            display: table-cell;
            vertical-align: middle;
            border: 1px solid red;
        }

2.3块级元素垂直居中

方法1：flex布局
在需要垂直居中的父元素上，设置display：flex和align-items：center
注意：父元素必须要设置height值

<!-- html部分 -->
    <div class="center">
        <div>垂直居中</div>
    </div>
 /* css部分 */
       .center{
           width: 300px;
           height: 200px;
           display: flex;
           align-items: center;
           border: 2px solid blue;
        }

2.4利用position和top和负margin（需知宽高）

1.设置元素为absolute/relative/fixed
2.margin=负一半

<!-- html部分 -->
    <div class="parent">
        <div class="child">已知高度垂直居中</div>
    </div>
/* css部分 */
       .parent{
           position: relative;
           width: 200px;
           height: 200px;
           border: 1px solid blue;
        }
        .child{
            position: absolute;
            height: 100px;
            width: 150px;
            top: 50%;
            margin-top: -50px;
            line-height: 100px;
            background-color: red;
        }

2.5利用position和top/bottom和margin:auto（注意不是margin:0 auto）

1.position：absolute/relative/fixed
2.top/bottom:0
3.margin:auto

<!-- html部分 -->
    <div class="parent">
        <div class="child">已知高度垂直居中</div>
    </div>
 /* css部分 */
       .parent{
           position: relative;
           width: 200px;
           height: 200px;
           border: 1px solid blue;
        }
        .child{
            position: absolute;
            height: 100px;
            width: 150px;
            top: 0;
            bottom: 0;
            margin: auto;
            line-height: 100px;
            background-color: red;
        }

2.6利用position和top和transform

transform中的translate偏移的百分比就是相对元素自身的尺寸而言的。
transform方法，可用于未知元素大小的居中

<!-- html部分 -->
    <div class="parent">
        <div class="child">已知高度垂直居中</div>
    </div>
 /* css部分 */
       .parent{
           position: relative;
           width: 200px;
           height: 200px;
           border: 1px solid blue;
        }
        /* 不知道被居中元素的尺寸 */
        .child{
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
            line-height: 100px;
            background-color: red;
        }

3、水平垂直居中

方法1：绝对定位+margin：auto

<!-- html部分 -->
   <div></div>
/* css部分 */
    div{
        width: 200px;
        height: 200px;
        background: green;
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法2：绝对定位+负margin

<!-- html部分 -->
   <div></div>
 /* css部分 */
   div{
        width:200px;
        height: 200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

方法3：绝对定位+transform

<!-- html部分 -->
    <div></div>
/* css部分 */
        div {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 50%;
            /* 定位父级的50%*/
            top: 50%;
            transform: translate(-50%,-50%);/*自己的50%*/
        }

方法4：flex布局

<!-- html部分 -->
    <div class="box">
        <div></div>
    </div>
/* css部分 */
         .box{
             height: 600px;
             display: flex;
             justify-content: center;
             align-items: center;
         }
         .box>div{
            background: indianred;
            width: 200px;
            height: 200px;
         }

方法5：设置table-cell来实现居中
设置
display:table-cell;
text-align:center;
vertical-align: middle;

<!-- html部分 -->
    <div class="parent">
        <div>123</div>
    </div>
/* css部分 */
         .parent{
             height: 200px;
             width: 200px;
             display: table-cell;
             text-align: center;
             border: 1px solid #ccc;
             vertical-align: middle;
         }

此文章仅供复习。