CSS中元素居中的几种方式

我们在调整页面样式的过程中，经常需要元素居中，包括字体水平/垂直居中，块级元素（如div）的水平/垂直居中，今天就来介绍一下以上提到的几种居中实现方式。

块级元素居中

先给出html：

<div class="father">
    <div class="son">
    </div>
</div>

如果只是想让一个元素水平居中，在没有浮动的情况下，直接给子元素加margin:auto属性，子元素就在父级元素中水平居中了。

如果不加定位的话，其实让元素水平居中个垂直居中还是挺麻烦的。所以，一般来说，我习惯于给父级元素加上position：relative属性，子元素加上position：absolute属性，让父元素保持原来位置脱离文本流（不影响父元素以外其他部分样式），子元素可以在父元素中随意位置。这样调整子元素在父元素中水平/垂直居中就比较方便了。

一种实现思路

.father{
    width: 400px;
    height: 400px;
    border: 1px dashed black;
    position: relative;
}
.son{
    width: 100px;
    height: 50px;
    background: pink;
    position: absolute;
    left: 0;
    top:0;
    bottom: 0;
    right: 0;
    margin: auto
}

对子元素设置绝对定位，就拥有了left,top等属性，将这些属性设置为0，同时margin设置为auto，子元素就在父元素中水平垂直居中了。

另一种实现思路

.father{
    width: 400px;
    height: 400px;
    border: 1px dashed black;
    position: relative;
}
.son{
    width: 100px;
    height: 50px;
    background: pink;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -50px;/* transform: translate(-50%,-50%) */
}

首先让子元素的左侧和上侧移动父级的50%宽和50%高，这样子元素的左上角就在父元素的中间了，现在让子元素的中心在父元素的中心，那么就让子元素分别向左和上移动自己宽度和高度的50%，这样就达到了子元素在父元素中居中的效果。

当然，如果子元素的宽高是未知 情况下，还可以用transform: translate(-50%,-50%)替代margin-left 和margin-top。

补充：居中一个浮动元素
关于浮动元素涉及到一些知识点，诸如清除浮动等，让浮动元素在父级中居中也是一个我们经常遇到的问题。首先给出HTML：

<div class="father clearfix">
    <div class="son">
    </div>
</div>

1. 首先让浮动元素水平居中
   CSS如下：

*{
    margin:0;
    padding:0;
}
.father{
    border: 1px dashed black;
    width: 400px;
}
.clearfix::after{
    content:"";
    display: block;
    clear:both
}
.son{
    width: 100px;
    height: 50px;
    background: pink;
    float:left;
    position: relative;
    left: 50%;
    margin-left:-50px
}

说明：给父级元素加clear::fix伪元素属性可以清除son的float：left带来的浮动，撑起父元素。子元素添加position：relative，使之相对定位（占据原有的位置），同时设置left：50%，让子元素左边流出父级元素宽的50%。再通过margin-left属性向自己的左侧移动自己宽度的一半，子元素相对父级元素水平居中完成。

2. 再让浮动元素垂直居中
   给父元素加一个高度，为了使效果明显。垂直居中和上述原理基本类似，主要还是计算好top属性和margin-top属性。
   CSS如下：

*{
    margin:0;
    padding:0;
}
.father{
    border: 1px dashed black;
    width: 400px;
    height: 500px;
}
.clearfix::after{
    content:"";
    display: block;
    clear:both
}
.son{
    width: 100px;
    height: 50px;
    background: pink;
    float:left;
    position: relative;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -50px /*上 右 下 左*/
}

效果如下：

文字居中

一个div中，如果我们想让里面的文字水平居中，父元素中设置text-align: center属性，如果想让文字垂直居中，就设置该文字所在子元素的line-height属性等于div的高度，就OK了。其中line-height指的是该行文字的高度，类似于word中的行高。
举例：

<div class="father">
    <span>我是块级元素里面的文字</span>
</div>

.father{
    width: 300px;
    height: 300px;
    border: 1px dashed black;
    text-align: center;
}
span{
    line-height: 300px
}

效果：

本人原创，转载请标明出处，谢谢合作！