css居中

最新推荐文章于 2023-02-12 21:20:52 发布

坐的我尾巴骨疼

最新推荐文章于 2023-02-12 21:20:52 发布

阅读量161

点赞数

分类专栏： html5+css3 文章标签： css html 和css css居中

本文链接：https://blog.csdn.net/qq_39038793/article/details/78713140

版权

html5+css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主要介绍四种居中方式，比较常用的：

1.margin：0 auto；

2.line-height;text-align:center;

3.table演变的居中

4.利用伸缩盒子box

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    html,body
	    {
	    	margin:0;
	    	padding:0;
	    }
		.contian
		{
			width:100%;
			height:100px;
			background-color: blue;
            min-width: 980px;
		}
		.header
		{
			width:80%;
			height:100px;
			background-color:yellow;
			min-width: 980px;
			margin:0 auto;
            text-align: center;
		}
		ul
		{
			line-height: 100px;
		}
		ul li
		{
			display: inline-block;

		}
	</style>
</head>
<body>
	<div class="contian">
		<div class="header">
			<ul>
				<li>列表</li>
				<li>列表</li>
				<li>列表</li>
				<li>列表</li>
			</ul>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    html,body
	    {
	    	margin:0;
	    	padding:0;
	    }
		.contian
		{   
			display:table;
			/*显示成表格*/
			width:100%;
			height:100px;
			background-color: blue;
            min-width: 980px;
		}
		p
		{   
			display: table-cell;
			/*显示成单元格*/
			background-color:yellow;
            text-align: center;
            vertical-align:middle;
		}
		
	</style>
</head>
<body>
	<div class="contian">
		
			<p>呵呵呵</p>
		
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.outer
		{
			width: 500px;
			height: 400px;
			background-color: #ddeeff;
			display: -webkit-box;
			-webkit-box-pack:center;
			/*水平居中*/
			-webkit-box-align:center;
			/*垂直居中*/
		}
		.inner
		{
			width: 300px;
			height: 200px;
			background-color: #ccee33;
			display: -webkit-box;
			-webkit-box-pack:center;
			/*水平居中*/
			-webkit-box-align:center;
			/*垂直居中*/
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner">
			独立之精神，<br>
			自由之思想。
		</div>
	</div>
</body>
</html>

第一个代码包含一二

坐的我尾巴骨疼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css居中

主要介绍四种居中方式，比较常用的：1.margin：0 auto；2.line-height;text-align:center;3.table演变的居中4.利用伸缩盒子box Document html,body { margin:0; padding:0; } .contian { width
复制链接

扫一扫

专栏目录