各种居中系列

最新推荐文章于 2025-02-12 09:04:39 发布

RowanIT3

最新推荐文章于 2025-02-12 09:04:39 发布

阅读量485

点赞数

分类专栏：前端文章标签： css-各种居中

本文链接：https://blog.youkuaiyun.com/RowanIT3/article/details/50684427

版权

前端专栏收录该内容

63 篇文章

订阅专栏

水平居中

方法①：margin:0 auto 实现水平居中（必须满足的条件是固定宽度块级元素）
方法②：text-align:center实现水平居中(测试后在父元素中设置，块级或行内元素可实现，除图片<img>外。其中若父级为块级，子元素也为块级则设置子元素display:inline-block，主要针对行内元素)

垂直居中

方法③：line-height:自身高度 实现垂直居中（针对行内元素）

 		若为**块级** 则选择绝对定位 设置高度=（父级高度-自身高度）/ 2

水平垂直居中

方法④：table表格 <td>标签中默认垂直居中，若设置text-align:center在ie6,ie7能水平垂直居中，但在ie8+、主流浏览器中的块级元素则无效果，但若将此块级元素设置display:inline-block可实现
方法⑤：模拟表格渲染 (关键字display:table-cell) 实现水平垂直居中 （适用于行内元素水平垂直居中）

<div id="container">
<div id="content">content</div>
</div>
 
#container {
height: 300px;
display: table;/*让元素以表格形式渲染*/
}
#content {
display:table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;/*使用元素的垂直对齐*/
}

方法⑥：负边距+绝对定位 此方法为杀手锏 (将父元素相对定位relative，子元素绝对定位且top:50%,left:50%此时子元素的左上角点位于父元素的中心位置，所以再加上负边距类似的把子元素"拉回来",margin-left:负子元素宽度/2，margin-top:负子元素高度/2)

<div class="parent">
  <div class="children"></div>
</div>

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

方法⑦：transform居中 (这个是针对不定宽的元素要居中使用的方法) 它配合方法⑥中的绝对定位具体体现,比如上次我遇到的水平垂直居中一个checkbox，宽度不定就使用此方法

.parent{position:relative}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

方法⑧：css3_flex

<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢！</div>
</div>

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

-⑨ 全0margin：auto法

<div class='xx'>
		<div class='xx_div'></div>
</div>
		.xx{
			width:100%;
			height:100px;
			background-color:gray;
			text-align:center;
			position:relative;
		}
		.xx_div{
			width:100px;
			height:40px;
			background-color:red;
			position:absolute;
			/*上下左右均为0 margin:auto*/
			margin:auto;
			top:0;
			left:0;
			right:0;
			bottom:0;
		}