前端学习系列——（七）水平居中和垂直居中

居中是对称美的一种形式，所以在布局时经常要涉及到居中显示。以下为了方便展示，直接在使用内联样式，正常情况推荐使用外部css文件。

一、水平居中

（1）行级元素

方法：父元素设置text-align:center

<div style="width:300px;height: 100px;border: 1px solid #f00;text-align: center">
    <span>居中元素</span>
</div>

（2）块级元素

方法：需居中的元素设置margin:0 auto

<div style="width:300px;height: 100px;border: 1px solid #f00;">
    <div style="width: 100px;height: 20px;background-color: #0f0;margin: 0 auto;"></div>
</div>

（3）浮动元素

1）宽度不固定的浮动元素

方法：父元素定位relative，向右移50%（过中线）；子元素定位relative，向左移50%，示意图如下

<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;border: 1px solid #f00;text-align: center">
    <div style="float: left;position: relative;left: 50%;">
        <div style="background-color:#0f0;float: left; position: relative;right: 50%">居中</div>
    </div>
</div>

2）宽度固定的浮动元素

方法：利用margin设置负值，直接对需要居中的元素进行位置设置，示意图如下

在这个例子中，其实也实现了垂直居中。

<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;border: 1px solid #f00;text-align: center">
    <div style="width:100px;height: 50px;margin: -25px 0 0 -50px;position: relative;left: 50%;top: 50%;background-color: #0f0">居中</div>
</div>

（4）绝对定位元素水平居中

方法：利用margin:0 auto的方式，但是必须添加并设置定位属性left和right为相同值，为了保证绝对定位元素的左右对称，一般设置为0。

<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;position: relative;border: 1px solid #f00;text-align: center">
    <div style="width:100px;height: 50px;left: 0px;right:0px;position: absolute;margin: 0 auto;background-color: #0f0">居中</div>
</div>

二、垂直居中

（1）行级元素

方法：父元素的height和line-height的值一样

<div style="width:300px;height: 100px;border: 1px solid #f00;line-height:100px">
    <span style="background-color:#0f0;">居中元素</span>
</div>

（2）块级元素

1）父元素高度固定的情况

方法1：第一步，父元素的height和line-height设置为相同值

第二步，垂直居中的子元素设置vertical-align:middle; //垂直居中对齐

以及display:inline/inline-block; //块级元素转行级元素或行块级元素

方法2：设置margin为负值

示例为方法1。

<div style="width:300px;height: 100px;border: 1px solid #f00;line-height:100px">
    <div style="background-color:#00f;display:inline;vertical-align:middle">居中元素</div>
</div>

2）父元素高度不固定的情况

方法：设置父元素的padding-top和padding-bottom的值一样

<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;border: 1px solid #f00;">
    <div style="width:100px;border: 1px solid #0f0;padding-top:20px;padding-bottom:20px">
        <div style="background-color:#00f;display:inline;vertical-align:middle">居中元素</div>
    </div>
</div>