CSS-水平和垂直居中的总结

在实际开发过程中，经常能够遇到需要居中的布局，包括水平居中和垂直居中。在CSS中，水平居中还算比较容易解决，使用 text-align: center 和 margin: 0 auto 就能够解决大部分的需求，但是垂直居中比较麻烦一点儿，以为跟水平居中相对应的 vertical-align: middle 和 margin: auto 0 使用起来是很难有达到预期的效果的，尤其是 margin: auto 0 根本就起不到垂直居中的效果。对于居中的方案，我多少知道一些，但是却没有真正的总结过相关的知识和技巧。所以，本着为了巩固自己的基础知识的目的，特意在网上查阅了相关的资料，并亲自试验后，特意总结下来。

水平居中

行内元素和行内块元素——text-align: center

<!-- HTML -->
<div class="parent">
        <span class="child">[span]居中居中居中居中居中居中居中居中居中</span>
        <p class="child">[p]居中居中居中居中居中居中居中居中居中</p>
        <div class="child">[div]居中居中居中居中居中居中居中居中居中</div>
        <input type="text" name="text" value="[input]居中居中居中居中居中居中居中居中居中"><br>
        <img src="img/1.jpg"/>
</div>

<!-- CSS -->
.parent {
    height: 300px;
    background-color: red;
    text-align: center;
}
.child {
    background-color: green;
}
.parent img {
    width: 100px;
    height: 100px;
}
div.child {
    width: 100px;
    height: 100px;
}
p.child {
    width: 100px;
    height: 100px;
}

效果图：

从图中可以看出来，text-align: center这一属性对于 span, input, img 三种行内和行内块元素都生效了。对于p 和 div 这种块级元素来说是无效的。

固定宽度的块级元素——margin: 0 auto

<!-- HTML -->
<div class="parent">
        <span class="child">[span]居中居中居中居中居中居中居中居中居中</span>
        <p class="child">[p]居中居中居中居中居中居中居中居中居中</p>
        <div class="child">[div]居中居中居中居中居中居中居中居中居中</div>
        <input type="text" name="text" value="[input]居中居中居中居中居中居中居中居中居中"><br>
        <img src="img/1.jpg"/>
</div>

<!-- CSS -->
.parent {
    height: 300px;
    background-color: red;  
}
.child {
    background-color: green;
    margin: 0 auto;
}
.parent img {
    width: 100px;
    height: 100px;
}
div.child {
    width: 100px;
    height: 100px;
}
p.child {
    width: 100px;
    height: 100px;
}

效果如下：

可以看出，对于块级元素 p 和 div 来说，水平居中了。

不固定宽度的块级元素——无法设置居中

因为在这种情况下，当块级元素没有设定宽度时，其宽度自动拉伸为父元素的宽度。

水平垂直居中

单行文本——line-height: height+text-align:center

高度固定的块级元素——绝对定位+margin设定负值

<!--HTML-->
<div class="parent">
    <div class="child">[div]居中</div>
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    position: relative; // 父元素相对定位
}
.child {
    background-color: green;
    width: 100px;
    height: 100px;
    position: absolute;// 子元素绝对定位
    top: 50%; // 垂直位置设为50%
    left: 50%;// 水平位置设为50%
    margin-top: -50px; // margin-top设为高度的一半
    margin-left: -50px;// margin-left设为高度的一半
}

效果：

高度固定的块级元素——父元素设置display: table-cell和vertical-align: middle

<!--HTML-->
<div class="parent">
    <div class="child">[div]居中</div>
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    display: table-cell;
    vertical-align: middle;
}
.child {
    background-color: green;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

高度固定的块级元素——绝对定位和margin: auto及left=right=top=bottom=0

<!--HTML-->
<div class="parent">
    <div class="child">[div]居中</div>
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    position: relatvie;
}
.child {
    background-color: green;
    width: 200px;
    height: 200px;
    position: relative;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

图片——绝对定位+margin: auto

<!--HTML-->
<div class="parent">
    <img class="child" src="img/1.jpg" style="width: 200px;height: 200px">
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
}

效果：

图片——父元素设置display: table-cell和vertical-align: middle

<!--HTML-->
<div class="parent">
    <img class="child" src="img/1.jpg" style="width: 200px;height: 200px">
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    display: table-cell;
    vertical-align: middle;
}

效果同上。

高度不固定的块级元素—绝对定位和transform

<!--HTML-->
<div class="parent">
    <div class="child">居中居中居中居中居中居中居中居中</div>
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    position: relative;
}
.child {
    background-color: green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

效果

高度不固定的块级元素—flex布局1

<!--HTML-->
<div class="parent">
    <div class="child">居中居中居中居中居中居中居中居中</div>
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    display: flex;
}
.child {
    background-color: green;
    margin: auto;
}

效果

高度不固定的块级元素—flex布局2

<!--HTML-->
<div class="parent">
    <div class="child">居中居中居中居中居中居中居中居中</div>
</div>

<!--CSS-->
.parent {
    width: 400px;
    height: 400px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    background-color: green;
}

暂时就这么多吧，以后有更好的办法，都会持续更新的。。。。