web中的各种居中

最新推荐文章于 2023-03-13 02:00:01 发布

要和代码过一辈子

最新推荐文章于 2023-03-13 02:00:01 发布

阅读量1.6w

点赞数 7

分类专栏： web前端文章标签： html居中水平居中垂直居中 css居中 web居中

本文链接：https://blog.csdn.net/qq_35790269/article/details/89424295

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

居中是前端开发过程中最常见的布局，但是很多人都不清不楚，每次就靠试一试，今天就拎一拎～～

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习居中</title>
<style>
.father
{
	height: 200px;
	width: 200px;
	border: 1px solid #000;
	text-align: center; 
	/* 水平居中,只对图片、文字、按钮等行内元素(display:inline/inline-block)居中 */
}
.childa
{
	background-color:#d0e4fe;
	height: 50px;
	width: 50px;
	margin: auto;  /*margin: 0 auto;*/ 
	/* 水平居中,且对浮动元素(float:right/left)和绝对定位(position:absolute)元素无效 */
}
.childb
{
	font-family: "Times New Roman";
	font-size: 20px;
	height: 50px;
	line-height: 50px;
	/* 单行文字的垂直居中,只适用于一行文字的情况，line-height === height */
}
#wrapper {
    display: table;
    
}
#cell {
	height: 200px;
	width: 200px;
	border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;
    /* 垂直居中,父设置为table元素,自己为table-cell元素,vertical-align:middle;子垂直居中 */
}
.tablediv{
	width: 100px;
	height: 100px;
	background: #d0e4fe;
	/* 水平垂直居中,(th tr td设置)align:center; */
	/* 垂直居中,(th tr td设置)valign:center; */
}
.box{
	height: 200px;
	width: 200px;
	position: relative;
	border: 1px solid #000;
}
.content-box{
	width: 50px;
	height: 50px;
	position: absolute;
	background-color: #d0e4fe;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	/* 水平垂直居中,父设置为position:relative;子设置为position:absolute;top:50%;left:50%;margin-top:-自身高度的一半;margin-left:-自身宽度的一半; */
}
.content-box2{
	width: 50px;
	height: 50px;
	position: absolute;
	background-color: #d0e4fe;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* 水平垂直居中,父设置为position:relative;子设置为position:absolute;top:0;left:0;right:0;bottom:0;margin:auto; */
}
.content-box3{
	width: 50px;
	height: 50px;
	position: absolute;
	background-color: #d0e4fe;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 水平垂直居中,父设置为position:relative;子设置为position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); */
}
.flex{
	height: 200px;
	width: 200px;
	display: flex;
	border: 1px solid #000;
	justify-content: center;
	/* 水平居中,父设置为display:flex;justify-content:center; */
	align-items: center;
	/* 垂直居中,父设置为display:flex;align-items:center; */
}
</style>
</head>
<body>
	<div class='father'>
		<div class='childa'></div>
		<div class='childb'>343434</div>
	</div>
    <div id="cell">
        <div class="content">Content goes here</div>
    </div>
	<table border='1'>
		<tr valign="center">
			<td height='200' 
				width='200' 
			>
				<div class='tablediv'></div>
				<span>67677</span>
			</td>
		</tr>
	</table>
	<div class="box">
        <div class="content-box"></div>
    </div>
    <div class="box">
        <div class="content-box2"></div>
    </div>
    <div class="box">
        <div class="content-box3"></div>
    </div>
    <div class="flex">
        <div class="tablediv"></div>
    </div>
</body>
</html>

要和代码过一辈子

关注

7
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
web中的各种居中

居中是前端开发过程中最常见的布局，但是很多人都不清不楚，每次就靠试一试，今天就拎一拎～～<!DOCTYPE html><html><head><meta charset="utf-8"><title>学习居中</title><style>.father{ height: 200px; wid...
复制链接

扫一扫