css居中小妙招

身为前端，与样式打交道是必不可少的。每次拿到设计小姐姐的设计稿，你就会发现横向、纵向居中是设计小姐姐们的最爱。下面我就来总结一下居中常用的方法吧（喜欢就收藏哦😊）

---

（1）元素本身居中

a、使用line-height

<div class="box">我是box的文字</div>

.box{

        border: 1px solid #666;

        border-radius: 10px;

        width: 120px;

        height: 30px; 

        line-height: 30px;  /*line-height要和height设置成一样*/

        text-align: center; /*文本内容居中*/

    }

效果如下：

image

b、使用padding居中

.box{

    border: 1px solid #666;

    border-radius: 10px;

    padding: 5px 30px

}

效果如下（简单大方）：

image

（2）子元素在父元素居中

<div class="parent">

        <div class="child">我是子元素</div>

    </div>

a、使用position

子元素有宽度和高度时

.parent{

        width: 600px;

        height: 600px;

        border: 1px solid #666;

        margin: 0 auto;

        margin-top: 60px;

        border-radius: 10px;

        position: relative;

    }

    .child{

        background: pink;

        width: 200px;

        height: 200px;

        border-radius: 10px;

        position: absolute;

        left: 50%;

        top: 50%;

        margin-top: -100px;

        margin-left: -100px;

    }

效果如下：

image

子元素无具体宽高时：

.parent{

        width: 600px;

        height: 600px;

        border: 1px solid #666;

        margin: 0 auto;

        margin-top: 60px;

        border-radius: 10px;

        position: relative;

    }

    .child{

        background: pink;

        border-radius: 10px;

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

    }

效果如下：

image

b、使用flex居中（好用实力推荐）

.parent{

        width: 600px;

        height: 600px;

        border: 1px solid #666;

        margin: 0 auto;

        margin-top: 60px;

        border-radius: 10px;

        display: flex;

        align-items: center;    /*上下居中*/

        justify-content: center; /* 左右居中*/

    }

    .child{

        background: pink;

        border-radius: 10px;

    }

效果同上哦

---

有了这些小妙招，再也不怕设计小姐姐的设计稿了😄😄😄。