CSS中的居中方式

最新推荐文章于 2022-07-16 12:27:52 发布

D-liang先生

最新推荐文章于 2022-07-16 12:27:52 发布

阅读量147

点赞数 3

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45352819/article/details/108848745

版权

CSS中居中方式：

在HTML和CSS的应用中，我们会用到很多的居中方式比如说：单行文本的居中、多行文本的居中、图片的居中。下面我们来逐个的来学习和实现。

单行文本的居中：

	①单行文本的水平居中：text-align:center;
	②单行文本的垂直居中：line-hight:AApx;（AApx要和你的high一样）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行文本的居中方式</title>
    <style type="text/css">
     .parent{
     background-color: gainsboro;
     height:200px;
     width:200px;
     text-align:center;/*使它水平居中*/
     line-height:200px;/*使它垂直居中*/
     }
    </style>
</head>
<body>
    <div class="parent">
        <div>center</div>
 
    </div>
</body>
</html>

实现的效果：

多行文本的居中方式：

	①父元素的高度不固定时：设置padding的使文本在视觉上开上去居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用padding居中</title>
    <style type="text/css">
    .parent{
    background-color:gainsboro;
    width:400px;
    height:400px;
    padding:200px 200px 0 200px;
    } 
    </style>
</head>
<body>
    <div class="parent">
        <div clss="center"> this is a center div.this is a center div.
			this is a center div.this is a center div.</div>
       </div>
</body>
</html>

实现的效果:
在这里插入图片描述

	②水平居中显示：margin：0 auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平居中margin</title>
    <style type="text/css">
    
    </style>
</head>
<body>
    <div class="parent">
        <div>this is a center div.this is a center div.
			this is a center div.this is a center div.  </div>
 
    </div>
</body>
</html>

实现的效果在这里插入图片描述
注意：要给中间元素一个高度并且不浮动

	③水平垂直居中的方式：绝对定位 position：absolute;
	Ⅰ.position：absolute；
	     top:0; right:0 ;bottom:0; left:0;
	     margin；0 auto;
	Ⅱ.position：absolute;
	     top:50%； left:50%;
	     margin-top:-(height/2)px;
	     magrin-left:-(width/2)px;
	Ⅲ.position：absolute;
	     top:50%； left:50%;
	     transform:translate(-50%,-50%);

这里只列举Ⅰ方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute</title>
    <style type="text/css">
    .parent{
    background-color:gainsboro;
    width: 200px;
    height:200px;
    position: relative;/*relative、absolute、fixed*/
    } 
    .box{
        width: 50px;
        height: 50px;
        background-color: rgb(238, 228, 139);
        position: absolute;
        top: 0;left: 0;
        bottom: 0; right: 0;
        margin: auto;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="box">  center  </div>
    </div>
</body>
</html>

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

注意：对于absolute定位的层总是相对于其最近的定义为absolute或relative或fixed的父层，
而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative或fixed，
则其将相对body进行定位。

③水平垂直居中的方式：表格布局 display：table-call；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table-call</title>
    <style type="text/css">
    .parent{
    background-color:gainsboro;
    width: 200px;
    height:200px;
     display: table-cell;
     vertical-align:middle;/*子元素垂直居中*/
    } 
   p{
        width: 50px;
        height: 50px;
        background-color: rgb(238, 228, 139);
        margin:0 auto;  /*自身相对于父级水平居中,只对块级元素或者行内元素设display:block起作用*/
    }
    </style>
</head>
<body>
    <div class="parent">
        <p> center  </p>
    </div>
</body>
</html>

④水平垂直居中的方式：弹性布局display:flex

	通过在其父级元素中添加样式：
	display: flex;
	justify-content:center;  //使子元素水平居中
	align-items:center;   //使子元素垂直居中

1.	<!DOCTYPE html>
2.	<html>
3.	    <head>
4.	        <meta charset="UTF-8">
5.	        <title></title>
6.	        <style type="text/css">
7.		    div{
8.		        width: 200px;
9.		        height: 100px;
10.		        background: skyblue;
11.		        display: flex;
12.		        justify-content: center; /*水平居中*/ 
13.		        align-items: center;  /*垂直居中*/
14.		    }
15.		    p{
16.	                width:100px;
17.	                height:50px;
18.		        background: pink;
19.		    }
20.	        </style>
21.	    </head>
22.	    <body>
23.		<div class="big">
24.		    <p>子元素</p>
25.		</div>
26.	    </body>
27.	</html>

⑤水平垂直居中的方式：display:box

	通过在其父级元素中添加样式：
	display: box;
	display: -webkit-box;
	-webkit-box-pack:center; /*实现水平居中*/
	-webkit-box-align:center; /*实现垂直居中*/

1.	<!DOCTYPE html>
2.	<html>
3.	    <head>
4.	        <meta charset="UTF-8">
5.	        <title></title>
6.	        <style type="text/css">
7.		    div{
8.		        width: 200px;
9.		        height: 100px;
10.		        background: skyblue;
11.		        display: box;
12.			display: -webkit-box;
13.			-webkit-box-pack:center; /*实现水平居中*/
14.			-webkit-box-align:center; /*实现垂直居中*/
15.		    }
16.		    p{
17.	                width:100px;
18.	                height:50px;
19.		        background: pink;
20.		    }
21.	        </style>
22.	    </head>
23.	    <body>
24.		<div class="big">
25.		    <p>子元素</p>
26.		</div>
27.	    </body>
28.	</html>

图片居中

	水平居中：
   在其父级元素添加样式text-align:center
	垂直居中：
   1.在其父级元素添加padding样式
   2. 在图片<img>标签前面添加一个行内元素，如<b></b>
   给<b>标签样式：height:100%;display:inline-block; vertical-align: middle;
   给图片<img>标签添加样式：vertical-align: middle;
   由于图片大小不能大于div层大小，因此最好给图片<img>标签设置max-width,max-height样式。

1.	<!DOCTYPE html>
2.	<html>
3.	    <head>
4.	        <meta charset="UTF-8">
5.		<title></title>
6.		<style type="text/css">
7.		    .box{
8.			width: 300px;
9.			height: 300px;
10.			background: skyblue;
11.			text-align: center;/*水平居中*/
12.			box-sizing: border-box;
13.		    }
14.		    b{height: 100%;
15.	          display: inline-block;
16.	          vertical-align: middle;}
17.		    img{vertical-align: middle;
18.	             max-width: 100px;
19.	             max-height: 100px;}
20.		</style>
21.	    </head>
22.	    <body>
23.		<div class="box">
24.		    <b></b>
25.		    <img src="baidu.png"/>
26.		</div>
27.	    </body>
28.	</html>