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.总结

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












相关文章
|
2天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
22天前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
16 1
|
1月前
|
前端开发
css水平居中的5种几种方式
css水平居中的5种几种方式
|
2月前
|
前端开发 容器
css中元素水平居中的方式
css中元素水平居中的方式
37 0
|
2月前
|
前端开发
CSS div 水平排列
CSS div 水平排列
|
3月前
|
前端开发
css设置div水平居中
css设置div水平居中
|
4月前
|
前端开发
css如何让实现一个元素在网页中垂直水平居中
css如何让实现一个元素在网页中垂直水平居中
23 0
|
5月前
|
前端开发 容器
css实现容器垂直水平居中的七中方法
css实现容器垂直水平居中的七中方法
34 0
|
Web App开发 前端开发 容器
CSS-垂直|水平居中问题的解决方法总结
  题外话:前两天和专业老师探讨最近的一个项目,涉及到对一个浮动的盒子局中的问题,老师的解决方法打开了我的新思路。让我有了总结一下平时的居中问题的想法。不然可能忘掉了以后又要到处寻找解决办法了。另外也给我一个启示:启示解决方法有很多,就看你能不能对知识灵活运用。
1759 0
|
1月前
|
Web App开发 移动开发 JavaScript
分享88个HTML&CSS源码,总有一款适合您
分享88个HTML&CSS源码,总有一款适合您
25 1

相关产品

  • 云迁移中心