HTML+CSS+JS-扩展：CSS水平居中和垂直居中

其他 2019-06-25 09:11:31 阅读次数: 0

水平居中

1.       Text-align文字内容居中

实例：Demo01

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#text{
				color: white;
				text-align: center;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="text">
			设置文字居中使用text-align: center;属性
		</div>
	</body>
</html>

效果图

2.       Margin和width居中

整体居中使用margin属性，让左右的外边距自动，前提条件需要设置width属性。

要求：

  • 设置居中的元素是区块元素（可以设置宽高）
  • 设置居中的元素必须设置width属性
  • 设置居中的元素必须设置左右外边距自动（margin:auto;或margin:0 auto;或margin-left:auto;margin-right:auto;）

实例：demo02

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				margin-left: auto;
				margin-right: auto;
				width: 400px;
				background-color: blueviolet;
			}
			header,footer,section{
				text-align: center;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<header>头部<hr></header>
			<section>内容，所以文字内容居中显示，并且整个模块整体居中。</section>
			<section>整体居中的要求：</section>
			<section>1.最外层元素是区块元素</section>
			<section>2.最外层元素width属性</section>
			<section>3.最外层元素设置margin:auto;</section>
			<footer><hr>底部</footer>
		</div>
	</body>
</html>

效果图

3.       Taxt-align和display居中

  • 利用display:inline-block;让元素具有内联元素的特性，然后使用taxt-align让内联内容居中
  • 内联元素可以是inline和inline-block

实例：demo03

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: blueviolet;
				text-align: center;
			}
			.menu{
				display: inline-block;
				padding: 5px 10px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="menu">首页</div>
			<div class="menu">新闻</div>
			<div class="menu">动态</div>
			<div class="menu">联系</div>
		</div>
	</body>
</html>

效果图

4.  浮动元素居中

浮动的元素本身只有左右布局，不能居中，但是可以利用外层元素居中来实现

实例：demo04

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: blueviolet;
				width: 400px;
				margin: auto;
				height: 40px;
			}
			.menu{
				float: left;
				height: 40px;
				width: 100px;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="menu">首页</div>
			<div class="menu">新闻</div>
			<div class="menu">动态</div>
			<div class="menu">联系</div>
		</div>
	</body>
</html>

效果图

5.       绝对定位和margin居中

绝对定位的元素可以通过left:50%将左上角移动到中间

然后使用margin-left:-200px（宽度的一半）整体左移宽度一半的距离

实例：demo05

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: blueviolet;
				width: 400px;
				height: 160px;
				position: absolute;
				left: 50%;
				margin-left: -200px;
			}
			.menu{
				
				height: 40px;
				width: 100px;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="menu">首页</div>
			<div class="menu">新闻</div>
			<div class="menu">动态</div>
			<div class="menu">联系</div>
		</div>
	</body>
</html>

效果图

6.       使用div填充居中

在需要居中的元素左边填充一个空的div来使元素对齐

实例：demo06

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				white-space: nowrap;
				overflow: hidden;
			}
			#left{
				display: inline-block;
				height: 40px;
				width: 50%;
			}
			.menu{
				position: relative;
				left: -200px;
				background-color: #20B2AA;
				display: inline-block;
				height: 40px;
				width: 100px;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="left"></div>
			<div class="menu">首页</div>
			<div class="menu">新闻</div>
			<div class="menu">动态</div>
			<div class="menu">联系</div>
		</div>
	</body>
</html>

7.       绝对定位和width和margin：0 auto居中

绝对定位的时候，可以利用left:0和right:0和margin:0 auto自动水平居中，必须设置width。

实例：demo07

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				position: relative;
			}
			.menu{
				background-color: #20B2AA;
				position: absolute;
				left: 0;
				right: 0;
				margin: 0 auto;
				height: 40px;
				width: 100px;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="menu">首页</div>
		</div>
	</body>
</html>

8.       CSS3的fit-content和margin居中

实例：demo08

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #20B2AA;
				width: -moz-fit-content;
				width:-webkit-fit-content;
				width: fit-content;
				margin-left: auto;
				margin-right: auto;
			}
			.menu{
				display: inline-block;
				height: 40px;
				width: 100px;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="menu">首页</div>
			<div class="menu">新闻</div>
			<div class="menu">动态</div>
			<div class="menu">联系</div>
		</div>
	</body>
</html>

效果图

9.       Display弹性盒子justify-content居中

Display:flex; Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。

实例：demo09

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				display: flex;
				justify-content: center;
				
			}
			.menu{
				height: 40px;
				width: 100px;
				line-height: 40px;
				text-align: center;
				background-color: #008B8B;
				align-self: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="menu">首页</div>
			<div class="menu">新闻</div>
			<div class="menu">动态</div>
			<div class="menu">联系</div>
		</div>
	</body>
</html>

效果图

10.       绝对定位和Transform居中

实例：demo10

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				position: absolute;
				background-color: #008B8B;
				height: 40px;
				transform: translate(-50%,0);
				-webkit-transform: translate(-50%,0);
				left: 50%;
			}
			.menu{
				float: left;
				height: 40px;
				width: 100px;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="menu">首页</div>
			<div class="menu">新闻</div>
			<div class="menu">动态</div>
			<div class="menu">联系</div>
		</div>
	</body>
</html>

效果图

垂直居中

1.       line-height文字居中

实例：demo11

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			使用行高让文字居中
		</div>
	</body>
</html>

效果图

2.       Display和vertical-align居中

实例：demo12

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				width: 500px;
				height: 100px;
				display: table-cell;
				vertical-align: middle;
			}
			.text{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

3.       Display和align-items居中

实例：demo13

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				width: 500px;
				height: 100px;
				display: flex;
				align-items: center;
			}
			.text{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

4.       Display和flex-wrap和align-content居中

实例：demo14

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				height: 100px;
				display: flex;
				flex-wrap: wrap;
				align-content: center;
			}
			.text{
				background-color: red;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

5.       Display和align-self居中

实例：demo15

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				height: 100px;
				display: flex;
			}
			.text{
				background-color: red;
				height: 30px;
				align-self: center;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

6.       绝对定位和height和margin负宽度的一半居中

实例：demo16

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				height: 100px;
				position: relative;
			}
			.text{
				background-color: red;
				height: 30px;
				position: absolute;
				top: 50%;
				margin-top: -15px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

7.       绝对定位和height和margin:auto 0居中

实例：demo17

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				height: 100px;
				position: relative;
			}
			.text{
				background-color: red;
				height: 30px;
				position: absolute;
				top: 0;
				bottom: 0;
				margin-top: auto;
				margin-bottom: auto;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

8.       绝对定位和transform居中

实例：demo18

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				height: 100px;
				position: relative;
			}
			.text{
				background-color: red;
				height: 30px;
				position: absolute;
				top: 50%;
				transform: translate(0,-50%);
				-webkit-transform: translate(0,-50%);
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

9.       使用div填充居中

实例：demo19

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				height: 100px;
			}
			.base{
				height: 50%;
			}
			.text{
				background-color: red;
				height: 30px;
				margin-top: -15px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="base"></div>
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

10.    Display和flex-flow和justify-content居中

实例：demo20

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<style type="text/css">
			#content{
				background-color: #008B8B;
				height: 100px;
				display: flex;
				flex-flow: column;
				justify-content: center;
			}
			.text{
				background-color: red;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="text">
				使用表格配合垂直对齐属性让文字居中
			</div>
		</div>
	</body>
</html>

效果图

  1. HTML+CSS+JS精细化教程（新）适合学习和巩固基础（必掌握技能）
  2. JAVA语言（面向对象都不是事，重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统）
  3. JAVA WEB（MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等）
  4. Spring Boot2（新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码）
  5. Python（小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具）
  6. Photoshop（CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集）
  7. Unity2D/3D（手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做）
  8. Android原生开发（大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发）
  9. IOS原生开发（各种收费应用、游戏开发、工具开发、物联网开发）
  10. PHP（HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis）

猜你喜欢

转载自blog.csdn.net/starzhangkiss/article/details/79847018
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022