[JavaScript知识库] css元素垂直和水平居中

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> css元素垂直和水平居中 -> 正文阅读

[JavaScript知识库]css元素垂直和水平居中

已知元素高度
方式一：

<html>
	<head>
		<style>
			.box {
				width: 200px;
				height: 200px;
				position: relative;
			}
			.content {
				width: 40px;
				height: 40px;
				background: lightgray;
				position: relative;
				margin: 0 auto; /* 水平居中 */
				top: 50%; /* 顶部与box中线对齐 */
				margin-top: -20px; /* 中心与box中线对齐 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content"></div>
		</div>
	</body>
</html>

方式二：

<html>
	<head>
		<style>
			.box {
				width: 200px;
				height: 200px;
				position: relative;
			}
			.content {
				width: 40px;
				height: 40px;
				background: lightgray;
				position: absolute;
				margin: auto;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content"></div>
		</div>
	</body>
</html>

未知元素高度

<html>
	<head>
		<style>
			.box {
				width: 200px;
				height: 200px;
				position: relative;
			}
			.content {
				background: lightgray;
				position: absolute;
				left: 50%; /* 左边与竖直中线对齐 */
				top: 50%; /* 上边与水平中线对齐 */
				transform: translate(-50%, -50%); /* 向左和向上移动当前元素的50%  */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">居中</div>
		</div>
	</body>
</html>

flex布局

<html>
	<head>
		<style>
			.box {
				width: 200px;
				height: 200px;
				display: flex;
				justify-content: center; /* 水平居中 */
				align-items: center; /* 垂直居中 */
			}
			.content {
				background: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content"></div>
		</div>
	</body>
</html>

before伪元素+vertical-align: middle;

<html>
	<head>
		<style>
			.box {
				width: 200px;
				height: 200px;
				text-align: center;
				font-size: 0;
				border: 1px dotted #f00;
			}
			.box:before {
				content: "";
				height: 100%;
				width: 0;
				vertical-align: middle;
			}
			.content {
				background: lightgray;
				font-size: 14px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">居中</div>
		</div>
	</body>
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-03-31 23:55:34 更:2022-03-31 23:57:11

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 4:53:25-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码