CSS垂直/水平居中总结-阿里云开发者社区

开发者社区> 开发与运维> 正文

CSS垂直/水平居中总结

简介:

经常会遇到各种元素要求居中的,今天把他们都叫出来统一解决:

1.水平居中

1.1行内元素

text-align:center;

1.2固定宽度块级元素

margin-left:auto;margin-right:auto;
注意:一定要确保设定了宽度值,而且声明了DOCTYPE。

1.3不确定宽度块级元素

<pre name="code" class="html"><div class="wrap">
	<ul>
		<li>不固定宽度</li>
		<li>不固定宽度</li>
		<li>不固定宽度</li>
	</ul>
	<ul>
	<span style="white-space:pre">	</span><li>不固定宽度</li>
		<li>不固定宽度</li>
	</ul>
</div>



由于ul中的li数量未知,所以宽度不确定,现要使ul水平居中。
这里推荐一种最常用的方法:inline-block。
<pre name="code" class="css">.wrap{background:#ff0;text-align:center;padding:20px;}
li{
	list-style:none;
	background:#f0f;
	display:inline-block;
	*display:inline;
	*zoom:1;
}




2.竖直居中

2.1父元素高度不确定的行内元素

给父元素设置相同的上下内边距。

2.2父元素高度确定的单行文本

给父元素设置line-height,值与父元素高度相同,如果使用相对字体,外加overflow:hidden,你懂的。

2.3父元素高度确定的多行文本、图片以及块级元素

方法有很多种,但是个人偏好用绝对定位。
<div class="wrap">
	<div class="m">
		垂直居中
	</div>
</div>
.wrap{
	background:#ff0;
	height:200px;
	position:relative;
}

.m{
	position:absolute;
	background:#f0f;
	top:50%;
	height:80px;
	margin-top:-40px;
}

这个方法需要知道父元素和子元素的高度。还有一种简单方法:
.m{
	background:#f0f;
	margin:auto;
	position: absolute;  
        top: 0; left: 0; bottom: 0; right: 0;  
	height:100px;
	width:100px;
}


3.总结

网上查了资料,方法真的很多,但是比较好的就这几种,选一种最适合的就行了。












版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章