文本/容器居中显示

最新推荐文章于 2021-12-24 21:06:00 发布

QAQ_Monk

最新推荐文章于 2021-12-24 21:06:00 发布

阅读量643

点赞数

本文链接：https://blog.csdn.net/QAQ_Monk/article/details/52626333

版权

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

文本居中：

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>