CSS实现元素水平居中、垂直居中、水平垂直居中

最新推荐文章于 2024-02-27 16:25:30 发布
最新推荐文章于 2024-02-27 16:25:30 发布
阅读量587 收藏 4
点赞数 2
分类专栏： HTML&CSS 文章标签： CSS 水平垂直居中 水平居中 垂直居中
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/freya_yyy/article/details/99737558
版权

1.元素水平居中

1.1行内元素水平居中

1.2块级元素水平居中

      1.2.1定宽块级元素的水平居中

       1.2.2不定宽块级元素水平居中

2.元素垂直居中

2.1 单行文本垂直居中

2.2 多行文本垂直居中

2.3块级元素垂直居中

3.元素水平垂直居中 

1.元素水平居中

1.1行内元素水平居中

像文本text、图像img、按钮等行内元素要实现水平居中，只需要给父元素设置text-align:center;即可。

.center{
     text-align:center;
}
<div class="center">文本水平居中</div>

1.2块级元素水平居中

1.2.1定宽块级元素的水平居中：

方法1：给需要居中的块级元素设置：margin:0 auto;即可，注意块级元素必须设置宽度，否则和父元素等宽（正因为块级元素会自动填充对应方位，因此设置width后，自动填充效果会被覆盖，会有剩余空间，auto会平均分配容器的剩余空间，达到水平居中的效果）。

.main {
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		height: 50px;
		width: 150px;
		margin: 0 auto;
		border: 1px solid black;
		text-align: center;
	}
<div class="main">
	<div class="center">块级元素水平居中</div>
</div>

方法2：position+负margin：设置元素为absolute/relative/fixed;margin=负一半宽度

.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		height: 40px;
		width: 100px;
		left: 50%;
		margin-left: -50px;
		border: 1px solid black;
		text-align: center;
	}
<div class="main">
	<div class="center">水平居中</div>
</div>

方法3：position+margin:auto

  1. position:absolute/relative/fixed;
  2. left/right:0
  3. width
  4. margin:auto;
.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		height: 40px;
		width: 100px;
		left: 0;
		right: 0;
		margin: auto;
		border: 1px solid black;
		text-align: center;
	}
<div class="main">
	<div class="center">水平居中</div>
</div>

1.2.2不定宽块级元素水平居中：

方法1：给居中元素设置：display:table;再设置margin:0 auto;即可。

.main {
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		display: table;
		margin: 0 auto;
		border: 1px solid black;
		text-align: center;
	}
<div class="main">
	<div class="center">块级元素水平居中</div>
</div>

 

 方法2：（多个块状元素）子元素设置：display:inline-block;同时设置父元素：text-align:center;

.main {
		height: 200px;
		width: 200px;
		border: 1px solid black;
		text-align: center;
	}
.center1, .center2 {
		display: inline-block;
		border: 1px solid black;
		text-align: center;
	}

<div class="main">
	<div class="center1">水平居中</div>
	<div class="center2">水平居中</div>
</div>

方法3： 设置flex布局：将父元素设置为display:flex,justify-content:center;

.main {
		height: 200px;
		width: 200px;
		border: 1px solid black;
		display: flex;
		justify-content: center;
	}
.center1, .center2 {
		height: 40px;
		border: 1px solid black;
		text-align: center;
	}
<div class="main">
	<div class="center1">水平居中</div>
	<div class="center2">水平居中</div>
</div>

方法4：position+transform

  • left: 50%;， 定位父级的50%，元素水平方向在父级的1/2宽度处，故不处于水平居中的位置。
  •  translate(-50%,-0) 作用是，往左（x轴）移动自身宽度的 50%，以使其居于水平居中位置。
.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		/* 定位父级的50% */
		left: 50%;
		/*自身宽度的50%（在不知道元素具体宽度的时候可以使用） */
		transform: translate(-50%,0); 
		border: 1px solid red;
	}
<div class="main">
	<div class="center">水平垂直居中</div>
</div>

2.元素垂直居中

2.1 单行文本垂直居中

  • 设置paddingtop=paddingbottom；或
  • 设置line-height=height；

2.2 多行文本垂直居中

通过设置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部(垂直方向)

.main {
		height: 200px;
		width: 200px;
		display: table;
		border: 1px solid black;
	}
.center {
		display: table-cell;
		vertical-align: middle;
		border: 1px solid red;
	}
<div class="main">
	<div class="center">水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中</div>
</div>

2.3块级元素垂直居中

 方法1：设置flex布局：将父元素设置为display:flex;和align-items:center;

.main {
		height: 200px;
		width: 200px;
		display: flex;
		align-items: center;
		border: 1px solid black;
	}
.center {
		height: 100px;
		width: 100px;
		border: 1px solid red;
	}
<div class="main">
	<div class="center">垂直居中</div>
</div>

方法2：position+负margin：设置元素为absolute/relative/fixed;margin=负一半高度

.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		height: 100px;
		width: 100px;
		top: 50%;
		margin-top: -50px;
		border: 1px solid black;
		text-align: center;
	}
<div class="main">
	<div class="center">垂直居中</div>
</div>

方法3：position+margin:auto

  1. position:absolute/relative/fixed;
  2. top/bottom:0（定位元素具有拉伸也行，未设置width/height,absolute元素自动填充容器；width/height设置后，限制了absolute元素自动填满元素，margin:auto;自动平分被变更的尺寸空间。）
  3. height：
  4. margin:auto;
.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		height: 100px;
		width: 100px;
		top: 0;
		bottom: 0;
		margin: auto;
		border: 1px solid red;
	}
<div class="main">
	<div class="center">垂直居中</div>
</div>

方法4：position+transform

  • top: 50%;， 定位父级的50%，元素垂直方向在父级的1/2高度处，故不处于中心位置。
  •  translate(0,-50%) 作用是，往上（y轴）移动自身高度的 50%，以使其居于中心位置。
.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		/* 定位父级的50% */
		top: 50%;
		/*自身高度的50%（在不知道元素具体高度的时候可以使用） */
		transform: translate(0, -50%); 
		border: 1px solid red;
	}
<div class="main">
	<div class="center">水平垂直居中</div>
</div>

3.元素水平垂直居中 

方法1：绝对定位+margin:auto（IE8+）

.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		height: 100px;
		width: 100px;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		border: 1px solid red;
	}
<div class="main">
	<div class="center">水平垂直居中</div>
</div>

方法2：绝对定位+负margin

.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		height: 100px;
		width: 100px;
		top: 50%;
		left: 50%;
		margin-left: -50px;
		margin-top: -50px;
		border: 1px solid red;
	}
<div class="main">
	<div class="center">水平垂直居中</div>
</div>

方法3：flex布局

.main {
		height: 200px;
		width: 200px;
		display: flex;
		justify-content: center;//子元素水平居中
		align-items: center;//子元素垂直居中
		border: 1px solid black;
	}
.center {
		height: 100px;
		width: 100px;
		border: 1px solid red;
	}
<div class="main">
	<div class="center">水平垂直居中</div>
</div>

方法4：position+transform

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

  • top: 50%;left: 50%;， 是以左上角为原点，故不处于垂直居中的位置。
  •  translate(-50%,-50%) 作用是，往左（x轴）,上（y轴）移动自身长宽的 50%，以使其居于垂直居中的位置。
.main {
		position: relative;
		height: 200px;
		width: 200px;
		border: 1px solid black;
	}
.center {
		position: absolute;
		/* 定位父级的50% */
		top: 50%;
		left: 50%;
		/*自身宽度和高度的50%（在不知道元素具体宽度和高度的时候可以使用） */
		transform: translate(-50%, -50%); 
		border: 1px solid red;
	}
<div class="main">
	<div class="center">水平垂直居中</div>
</div>

Freya_yyy
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
transform:scale不缩小实际空间的问题
line233的博客
11-19 9630
首先声明一点，transform: scale对行内元素无效，而对块级元素和原子行内级元素生效等。 在开发中，有时会因满足设计需要而对元素进行整体缩放，transform: scale是现代浏览器都支持的css元素，应该是首选，但它会引发一个问题，虽然可以缩小整体显示的内容，但是并没有引起重排，所以占据的实际空间没有缩小，具体看下面的代码以及图片。 <!DOCTYPE html>...
css实现元素水平垂直居中常见的两种方式实例详解
09-24
主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来一起看看吧。
position:fixed后，水平居中
u010227042的博客
08-30 1126
.div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}
css实现上下左右居中
ʚ北慕南辞ɞ的博客
02-27 408
首先把内部盒子的位置设置为顶部和左侧距离大盒子顶部和左侧都是大盒子高度和宽度的50%；然后再把小盒子的顶部和左侧的位置都回退内部小盒子高度和宽度的50%；这样就刚好实现小盒子上下左右都居中在大盒子内部。利用display: flex和margin: auto实现。利用子绝父相和css3的transform属性实现。利用子绝父相和margin:auto实现。利用flex布局实现（弹性盒子）利用grid布局实现（网格布局）几种常用的上下左右居中方式。
【CSS3定位、变形transform、文字居中、区块元素居中】06
mango660的博客
11-24 3271
文章目录22. 定位22.1 相对定位22.2 绝对定位22.3 粘性定位23. 变形24. 居中 22. 定位 position_MDN static：无定位(默认值) 元素出现在正常的流中(忽略偏移值样式：top, bottom, left, right 和层级样式：z-index样式) 按照文档的流式(flow)定位，将元素放到一个合适的地方。流式定位能很好的自适应各种布局，取得相对较好的布局效果 inherit：继承父元素的定位方式 22.1 相对定位 relative：相对定位 仍然
css居中div的几种常用方法
qq_41762571的博客
02-01 755
在开发过程中，很多需求需要我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。 1.text-align:center方式 代码： <div class="center"> 　　<span class="center_text"> 123 　　<...
fixed定位之后，如何让div上下垂直居中
qq_15007601的博客
09-15 2850
在div用fixed定位之后，接下来想要其垂直居中， 需要在fixed定位的那个div  jxd-right上定义，  display:table;margin-top:auto;  margin-bottom:auto; 然后在 里面的div fixedmiddle定义 display:table-cell;，即可做到垂直居中 但是ie上实现无效。 .jxd-right{     pos...
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
css实现div水平、垂直居中兼容chrome、ie8
09-25
主要介绍了使用css实现的div水平、垂直居中并且兼容chrome、ie8，具体示例如下，需要的朋友可以参考下
CSS实现子元素div水平垂直居中的示例
01-21
父元素加相对定位，子元素加绝对定位 .main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: skyblue; pos
使用css实现div垂直居中的示例
09-25
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
CSS的选择器
m0_52083530的博客
01-19 980
概念：用于“查找”（或选取）要设置样式的 HTML 元素。（CSS要作用的标签，标签名就是选择器） 分类：基本选择器和高级选择器 基本选择器： 标签选择器：针对一类标签 ID选择器：针对一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用 高级选择器 后代选择器：可以选择作为某元素后代的元素（用空格隔开） 交集选择器：用.隔开 分组选择器（并集选择器）：选取所有具有相同样式定义的 HTML 元素 （用逗号隔开） 伪类选择器：根据特定状
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
说出至少五种使元素水平垂直居中的方式
yuqin的博客
07-19 398
记录第一次面试——广州凡科（二） 第2题：调动记忆的css题 （当时真是把什么表格元素、文本元素这些都凑五个写上去了，而且卷面还写的很乱。） 其实这些上网搜搜一大堆，只不过之前没有注意总结。以下贴个靠谱的方案。已经经过了本人的测试。 CSS水平居中+垂直居中+水平/垂直居中的方法总结 - 半夏半暖半倾城的博客 - CSDN博客 这个博主总结得相当全面！但是...
css 元素上下居中
datangde的专栏
02-06 1万+
css 中的元素加了position:absolute的时候，该元素已经脱离了文档流了，其高度和宽度已经不在
子元素相对于父元素水平垂直居中的几种方法
weixin_45571121的博客
08-17 3684
方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐） 1.1 代码及效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d...
微信小程序中view水平垂直居中
qq_43588120的博客
02-20 7469
微信小程序布局中view有时候需要在水平方向和垂直方向上都居中，发现flex布局可以实现，例如view1（图中灰色方块）需要实现居中，可以用如下设置实现： wxss文件中的设置如下： .main { width: 100%; height: 100%; position: fixed; background-color: #c573ac; **display: flex; flex-direct...
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
css实现垂直水平居中
最新发布
04-29
要实现CSS中的垂直水平居中，可以使用以下几种方法： 1. 使用Flexbox布局： 可以通过设置父容器的display属性为flex，并使用justify-content和align-items属性来实现垂直水平居中。具体代码如下： ```css ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值