文本/容器居中显示

来源：互联网发布：单片机程序设计实例编辑：程序博客网时间：2024/05/16 09:16

居中显示是开发中最经常使用了，总结一下俺自己知道的几种方便好记好用的居中方法。

文本居中：

1. 单行文本居中：text-align+line-height

这方法是最经常用的也是个人感觉最好用的了单行文本居中！！两个属性搞定，打完收工！

2.多行文本居中：父元素{固定高度宽度；line-height:高度;}

子元素{display:inline-block;line-height:1.4em(其他数值估计也可以看情况而设)；

vertical-align:middle;}

代码如下

<style><span style="white-space:pre"></span>test6 {<span style="white-space:pre"></span>line-height: 250px;border: 1px dashed #111;height: 250px;}#test6 span {display: inline-block;line-height: 1.4em;vertical-align: middle;text-align: center;}</style><body><span style="white-space:pre"></span><p id="test6"><span>任何空间的空格完成，方法即使设置font-size为0高度。同时，我们为了分隔line boxes，<br />同时要保持在一行上，需要设置display属性为inline-block。如下代码，有别于demo：</span><span style="white-space:pre"></span></p></body>

/*--------------------------------------------------------我去！好长的分割线-------------------------------------------------------------------*/

容器居中：

1.position+margin

用positon设定left:50%;top:50%，由于这是以容器的左上角为基点，所以需要用margin-top:-高度/2（那条-是负值，不是手残打出来的！！）和margin-left:-宽度/2.

代码如下：

<style>.box1 {background: gray;position: relative;width: 200px;height: 200px;}.box2 {background: pink;width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top:-50px ;}</style><body><div class="box1"><div class="box2"></div></div></body>

2.依然是position+margin（position好像挺牛逼的）

设置position所有定位为0；然后直接margin：auto；简单粗暴！

代码如下

<style>#box1 {width: 100px;height: 100px;background: gray;position: relative;}#box1 .box2 {width: 20px;height: 20px;background: pink;margin: auto;position: absolute;                        left:0;<span style="white-space:pre"></span>right:0;<span style="white-space:pre"></span>top:0;<span style="white-space:pre"></span>bottom:0;}</style><body><div id="box1"><div class="box2"></div></div></body>

3.display:flex;margin:auto

这也简单暴力~display:flex是css3的新属性——多栏多列布局，听闻是移动端首选，没具体用过，先mark下，以后学到移动端的时候用。

代码如下：

<span style="white-space:pre"></span><style>#box1 {width: 200px;height: 200px;background: gray;display:flex;}#box1 .box2 {width: 100px;height: 100px;background: pink;margin: auto;}</style><body><div id="box1"><div class="box2"></div></div></body>

0 0