一篇全面搞定垂直水平居中的常见11种方式（超详细）

最新推荐文章于 2024-09-24 17:14:12 发布
置顶 最新推荐文章于 2024-09-24 17:14:12 发布
阅读量1.4k 收藏 12
点赞数 2
分类专栏： HTML/CSS 文章标签： html css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41633597/article/details/109006436
版权

冷静思考，举一反三

先看初始代码和初始效果，后续居中样式在此基础上面修改添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.songtao{
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			/* 左右居中 */
			margin: auto;
			
		}
		.center{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<body>
		<div class="songtao">
			<div class="center"></div>
		</div>
	</body>
</html>

初始图片

块级元素

1.Flex

利用Flex来居中元素是我最喜欢的垂直水平居中方式之一，几行代码就能优雅地实现元素垂直水平完美居中，简单实用。

关键语句：display: flex;（弹性盒子）
justify-content: center;（左右居中）
align-items: center;（垂直居中）

.songtao{
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			display: flex;
			justify-content: center;
			align-items: center;
		}

效果：
在这里插入图片描述

2.display + margin

关键语句：父元素display: flex;（弹性盒子）
子元素margin: auto;（上下左右居中）

.songtao{
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			display: flex;
		}
.center{
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			margin: auto;
		}

效果：
在这里插入图片描述
注意：此方法只能完美居中一个子元素，如果子元素不止一个，则所有子元素垂直居中、左右均匀占据父容器所有空间。如下：
在这里插入图片描述
在这里插入图片描述

3.table-cell

关键语句：父元素display: table-cell;
vertical-align: middle;
子元素margin: auto;

（或）table-cell + display

关键语句：父元素display: table-cell;
vertical-align: middle;
text-align: center;
子元素display: inline-block;

       .songtao{
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			 margin: auto;  /* 失效 */
			/* 添加样式 */
			display: table-cell;
			vertical-align: middle;
		}
		.center{
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			margin: auto;
		}

效果：

在这里插入图片描述
可以看到子元素依然相对于父元素完美居中

4.position + translate

关键语句：父元素position: relative;
子元素position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

       .songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			position: relative;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

效果：
在这里插入图片描述

5.position + margin

关键语句：父元素position: relative;
子元素position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

       .songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			position: relative;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

效果：
在这里插入图片描述

6.position+calc( )

关键语句：父元素position: relative;
子元素position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);

       .songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			position: relative;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			position: absolute;
			/* 不一定为50px，根据被居中元素宽、高确定，支持百分数%*/
			top: calc(50% - 50px);
		    left: calc(50% - 50px);
		}

效果：
在这里插入图片描述

7.position+负margin

关键语句：父元素position: relative;
子元素position: absolute;
top:50%;
left:50%;
margin: -50px;

       .songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			position: relative;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			position: absolute;
			top:50%;
			left:50%;
			/* 不是所有的都能简写 */
			margin: -50px;
		}

效果：
在这里插入图片描述

8.Grid(网格布局)

兼容性不如Flex布局
关键语句：父元素display:grid;
子元素align-self: center;
justify-self: center;

.songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			display:grid;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			align-self: center;
			justify-self: center;
		}

效果：
在这里插入图片描述

9.最呆的方式（我称之为“强行居中”）

“强行居中”有很多方法，把属性值写“死”的（子元素大小不是规定大小就居中不了的）、不灵活的、无自身优点的方法我都归为“强行居中”，这里举一例：
关键语句？：重要的还是得知道被居中元素宽高
父元素：width: 500px;
height: 300px;
子元素：width: 100px;
height: 100px;

.songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
		    position: relative;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			position: absolute;
			/* 300/2-100/2 */
			top: 100px;
			/* 500/2-100/2 */
            left: 200px;
		}

效果：
在这里插入图片描述

行级元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			position: relative;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<body>
		<div class="songtao">
			<span class="center">焘焘不绝，努力变强！</span>
		</div>
	</body>
</html>

在这里插入图片描述

10.line-height + text-align

关键语句：父元素 text-align: center;
子元素line-height：父元素height；

       .songtao {
  			width: 500px;
			height: 300px;
			background-color: dodgerblue;
			margin: auto;
			/* 添加样式 */
			text-align: center;
		}

		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			line-height: 300px;
		}

效果：
在这里插入图片描述

11.display + vertical-align

关键语句：父元素 display: table;
子元素display: table-cell;
vertical-align: middle;
text-align: center;

       .songtao {
			width: 500px;
			height: 300px;
			background-color: dodgerblue;/* 失效 */
			margin: auto;
			/* 添加样式 */
			display: table;
		}
		.center {
			width: 100px;
			height: 100px;
			background-color: red;
			/* 添加样式 */
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}

效果：
在这里插入图片描述
引申
善用弹性盒子，行内元素/行内块级元素善用vertical-align: middle;

总结：

本篇这里只讲怎么实现(块级、行级实现方式可互通，灵活用)，具体原因与各个方法优缺点这里不细讲（有时间再写），各位可以尝试理解一下，当然还有一些上下左右的居中方式，但是我觉得不好的或者纯粹就是上边的有的方法的变种，所以就不写上去，各位如果还有什么好的居中方式希望在评论区不吝赐教。初写博客，写的不好（或有缺漏…），但尽量以我的能力给大家提供逻辑清晰，质量更高的博文。感谢各位朋友阅读至此！=^_^=

竹子南
关注
专栏目录
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9703
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
Qt开发经验总结
草上爬的博客
12-02 8769
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
10种方法实现水平垂直居中
her的博客
04-15 585
说起前端样式布局，最基础的就是水平垂直居中问题啦，所以本人在此汇总一下，以便记忆： 首先我们分为三大类来讲述： 一、水平（左右）居中： ①text-center:center ;非块级元素有效 ②margin：0 auto；块级元素有效 ③absolute+负margin；任何元素都有效 二、垂直（上下）居中： ①line-height+height；（不适合多行文本） ②vertical-ali...
2024 年 CSS 终于增加了垂直居中特性，效率翻倍！
最新发布
zhudapeng929的博客
09-24 575
在 2024 年的Chrome 123 版本中， CSS 原生可以使用进行垂直居中。
垂直水平居中的几种实现方式
qq_42576785的博客
11-13 223
一.使用弹性盒模型 display: flex      1. 在你不知道当前元素的宽高的情况下 你可以为父元素设置 display: flex;样式 并设置 align-items: center； justify-content: center    2. 还有种情况就是你知道为元素设置position: absolute; top: 50%; left: 50%; transform:...
前端 水平垂直居中的方法
weixin_46729085的博客
09-16 3082
第一中：writing-mode 可以参考：https://www.runoob.com/cssref/css-pr-writing-mode.html 这种方法稍微有些复杂，writing-mode可以改变文字的显示方向 第二种：table 形式 通过table单元格的形式设 优点：tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了 缺点：这个不是table的正确方法，不是很建议使用，但是也是可以实现的 第三种：table-cell实现水平垂直居中: tab...
垂直水平居中的几种方式
Azyyan的博客
02-23 5426
文本水平垂直居中的几种方式
html复选框和文字水平对其,解决checkbox与对应文字不对齐的问题
weixin_40000430的博客
06-09 1630
最近公持环开行打进对端架处参触架码我通会法时果司比较忙，所以一直在赶项目，很久没有更新博直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如客了。刚才在工调代求学功解宗维如请框总行断随以移泉动实作中又遇到了一个问题，下面我来分享一下吧(｡･∀微和二第说，班。都年很过过事发工开宗定据发指互数个遍前互就业大经･)ﾉﾞ问题所在我写了一个用记意口端样理框农必素些区大是应可近浏得input，他的类型是ch...
【CSS定位的详细讲解,一看就懂】
muweichang的博客
05-05 709
每天浪漫主义， 来自up主 加州旅行VLOG | 一号公路自驾 | 太平洋沿海公路看日落 | 丹麦小镇索尔万 | 卡梅尔海边小镇 定位定位相对定位position: relative绝对定位position: absolute子绝父相固定定位z-index 属性 定位 作用： 可以让元素自由的摆在网页中的任意位置 一般用于盒子之间的层叠情况 应用场景： 可以解决盒子与盒子之
css一起控制多个标签,纯css实现多标签浮动居中（任意个数）
weixin_35316354的博客
08-04 1348
在做的一个网页上有一块要用浮动标签，具体就是网页底部有未知数量，未知尺寸的元素要水平居中，有点类似于分页器。首先，我们先新建一个容器con，就是标签的爸爸，用来控制标签在页面的位置，.father{position:absolute;width:100%;height:30px;bottom:0;}接下来分析子元素的属性，因为元素的尺寸是未知的(主要是宽度)，所以不能给固定宽度，标签的个数也是未知...
CSS水平垂直居中的方法（Flex、Grid、translate、margin..）
qq_44396859的博客
10-10 1177
其实网上还有一些神通广大的网友的方法能够实现，但由于代码量的问题或者副作用的问题较多，就不再赘述，本文介绍的以上几种方法按照顺序依次推荐。参考链接：元素水平垂直居中都有哪些方法 - 简书。
垂直水平居中的3种方法
牧师的博客
01-05 365
垂直水平居中 这篇文章结合了 垂直居中和水平居中来进行设置 垂直水平居中，单独垂直居中和水平居中可以看我之前的文章 1.display:inline-block text-align:center (水平居中) + display:table-cell vertical-align:middle（垂直居中） 2.absolute + transform 3.display:flex + ...
实现垂直水平居中的几种方法
bobringtheboys的博客
08-05 335
实现垂直水平居中的几种方法 <body> <div id="box1"> <div id="box2"></div> </div> </body> 一、已知需要居中盒子的宽高 1.需要居中的盒子绝对定位，设置top:50%;left:50%;margin-top:负高度的一般;margin-left:负宽度的一半。 #box1{ width: 300px; height:300px;
几种常用垂直水平居中的方式
weixin_44965420的博客
02-10 377
本文总结了一下CSS实现水平垂直居中常用的方式有下面这些
【前端-css】div填充中间剩余位置
refealbellic的博客
08-21 543
两个各有各div。中间的div填满 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div测试</title> </head> <style> #one { background-color: aliceblue; width: 100%; hei
元素水平垂直居中的几种方式（简单直接）
木易的博客
09-01 771
前端项目开发时，我们在页面布局的时候，经常会遇到让一个元素水平垂直居中，实现的方式很多，下面就来简单总结下，直接上代码，需要的可以直接使用： 方式1 <body> <div class="wrap"></div> </body> .wrap{ width: 100px; height: 100px; position: absolute; left: 0px; right: 0px; bottom:..
html垂直水平居中的方法,CSS垂直水平居中的几种方法
weixin_35926197的博客
06-16 151
作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。栗子1：从最简单的水平居中开始margin: 0 auto;复制代码块级元素使用margin: 0 auto;可以在父元素的中间位置居中，不过要记得设置块级元素的宽高。HTML部分CSS复制代码CSS部分.example1 {width: 200px;hei...
Flexbox布局详解：全面解析水平垂直居中方案
在Web开发中，水平垂直居中是一种常见的需求，对于定长定宽或不定长宽的容器，有多种方法可以实现。首先，对于行内元素的水平居中，可以通过设置其父级元素的`text-align:center`属性来实现。这不仅适用于文字，也...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值