CSS居中总结

概述

---

一开始写CSS遇到最多的问题莫过于居中问题了，这里就做下小小总结吧。

水平居中比较好处理，一般来讲通过text-align:center; 和margin: 0 auto; 都能解决，主要问题可能都集中在垂直居中上，以下是实战中总结的有效的居中方法。

行内元素（inline）

方法一、单行行内元素， 父元素设置line-hight和高度相等可以达到垂直居中

<div class="parent">
	<div class="child">
		This is a inline element!     //为了撑起child高度
	</div>
</div>
.parent{
	width: 400px;
	height: 350px;
	line-height: 350px;    
	text-align: center;
	border: 1px solid black;
}
.child{
	width: 150px;
	display: inline;
	border: 1px solid black;
}

效果如下：

该方法对于单行行内元素，简单有效！

方法二、多行垂直居中 父元素设置line-height等于hight，子元素设置display:inline-block;vartical-align:middle以及line-height:1.5;覆盖父级元素line-hight为正常值即可。

<div class="parent">
	<div class="child">The first inline element!<br>
	The second inline element!</div>
</div>

.parent{
	height: 300px;
	line-height: 300px;
	width: 500px;
	border: 1px solid black;
	text-align: center;
}
.child{
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
}

效果图如下：

verticle-align

这里顺带提一下 vertical-align:middle；这个神坑，刚开始一直以为这个就是垂直居中，后来发现怎么用都不奏效，自己去查了一下文档，才了解到：

vertical-align:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

也就是说vertical-align:middle;只能让行内元素相对于该行居中，详细见以下示例：

<div class="parent">
	<span class="child">This is a
		<span class="top">Top</span>
		<span class="middle">Middle</span>
		<span class="bottom">Bottom</span>
		inline element!</span>
</div>
.parent{
	width: 400px;
	height: 350px;
	border: 1px solid black;
	text-align: center;
}
.child{
	font-size: 32px;
	display: inline-block;
	vertical-align: middle;   /*在块级父元素中垂直居中无效*/
	border: 1px solid black;
}
.top{
	font-size: 16px;
	vertical-align: top;
}
.middle{
	font-size: 16px;
	vertical-align: middle;
}
.bottom{
	font-size: 16px;
	vertical-align: bottom;
}

效果如下图：

方法三、利用padding上下内边距相等，实现垂直居中，对于单行、多行均有效。该方法的缺点在于父级单位的高度不确定。

<div class="parent">
	<span class="child">This is a inline element!</span>
</div>
.parent{
	padding: 50px 0;
	width: 400px;
	border: 1px solid black;
	text-align: center;
}
.child{
	font-size: 32px;
	border: 1px solid black;
}

块级元素

方法四： absolute绝对定位 该方法适用于子元素高度确定的情形

<div class="parent">
	<div class="child">This is a block element!</div>
</div>
.parent{
	position: relative;  /*别忘了父元素加上定位*/
	margin: 50px auto;
	height: 300px;
	width: 500px;
	border: 1px solid black;
}
.child{
	position: absolute;  
	top: 50%;
	left: 50%;
	width: 200px;
	height: 150px;
	margin-left: -100px;   /*宽度的一半*/
	margin-top: -75px;    /*高度的一半*/
	border: 1px solid black;
}

方法五、 对于子元素高度不确定的情形，利用absolute定位+transform

.parent{
	position: relative;
	height: 300px;
	width: 500px;
	border: 1px solid black;
}
.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 1px solid black;
}

实践看来，这个方法基本适用于各类情况，包括行内，块级。

方法六、flexbox弹性盒子，CSS3提供的弹性盒子模型，真的很强大。用于单个子元素的居中也是超级简单。

.parent{

	height: 300px;
	width: 500px;
	border: 1px solid black;
	display: flex;
	justify-content: space-around; /* 水平居中*/
	align-items: center; /*垂直居中*/
}

最后

以上就是常见的居中问题解决办法，有可能有些情况没有考虑到，以后再补充了。希望大家也不再为居中的问题而烦恼。

博客新人，纯手码，大家觉得有帮助的点个赞呗，也欢迎留言交流，嘻嘻！