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;}

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