CSS完成元素水平垂直居中

colezhou

发布于 2019-11-24 17:30:23

1.3K0

发布于 2019-11-24 17:30:23

文章被收录于专栏：经年隔世

要求：子元素和父元素宽高不确定，需要设置子元素水平垂直居中，效果如下图：

这里提供几种简单的实现方法：

1.使用margin:auto属性实现【兼容IE7以上大部分浏览器】

首先这个元素和它的父元素都要设置定位，其中这个要水平垂直居中的元素需设置绝对定位absolute，然后再给它设置样式{left: 0;right: 0;top: 0;bottom: 0;margin:auto;}。这样便可以实现元素在父容器里垂直居中显示了。

<style type="text/css">
.parent{
	/*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/
	width: 600px;
	height: 500px;
	background: #222222;
	position: relative;
}
.child{
	width: 150px;
	height: 200px;
	background: goldenrod;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
</style>

2.使用transform属性实现【浏览器兼容性：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE10+】

同上，设置好定位。然后添加样式{left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}便好了。其中的translateX(-50%)表示将此元素在X轴上向左移50%元素宽度的距离，同理translateY(-50%)将元素在Y轴上向上移50%元素高度的距离。

<style type="text/css">
.parent{
	/*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/
	width: 600px;
	height: 500px;
	background: #222222;
	position: relative;
}
.child{
	width: 150px;
	height: 200px;
	background: goldenrod;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}
</style>

3.使用flex布局实现【浏览器兼容性：Safari 9+、 Chrome 29+、Firefox 28+、Opera 17+、IE10+】

首先给父元素设置flex布局{display: flex;}，然后父元素再设置align-items: center; 可以使其包裹的子元素在水平方向上水平居中排列，再就是{justify-content: center;}属性规定了子元素在Y轴垂直方向上是居中排列。这样便实现了使用flex完成水平垂直居中的布局。

<style type="text/css">
.parent{
	/*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/
	width: 600px;
	height: 500px;
	background: #222222;
	display: flex;
	align-items: center;
	justify-content: center;
}
.child{
	width: 150px;
	height: 200px;
	background: goldenrod;
}
</style>

END

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-05-31日，如有侵权请联系 cloudcommunity@tencent.com 删除

ios

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

ios

css

登录后参与评论

0 条评论

热度