元素垂直居中的方法

vertical-align属性只对行内元素有效，对块内元素无效！

方法一：添加标尺的方法

1.给当前元素设置元素类型为inline-block并添加属性vertical-align: middle;

2.给当前元素添加一个同辈的元素并且和当前元素之间不能有空格和回车，给这个同辈元素设置元素类型为

width:0;

height:100%;

display:inline-block；

vertical-align:middle;

这样当前元素相对父元素就能实现垂直居中了

3.如果想再实现水平居中，父元素添加属性text-align:center;

例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			.box1{
				width: 500px;
				height: 500px;
				background: red;
				margin: 0 auto;
			    text-align: center;
			}
			.box1 .p1{
				display: inline-block;		
				vertical-align:middle ;
				width: 200px;
				background: green;
			}
			.box1 p{
				display: inline-block;		
				vertical-align:middle ;
				width: 0;
				height: 100%;
				
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="p1">元素水平垂直居中的方法一元素水平垂直居中的方法一
			        元素水平垂直居中的方法一元素水平垂直居中的方法一
			        元素水平垂直居中的方法一元素水平垂直居中的方法一
                        </div><p></p>
		</div>
	</body>
</html>

运行截图如下：

 

 

 

方法二：表格属性方法

结构：

<div class="boxWrap">
   <div class="box2">
    <p>表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法</p>
   </div>
</div>

1.给boxWrap添加margin：0 auto；使整个大块位于居中位置（由于box2设置为display：table-cell；元素类型之后，不支持margin属性，所以给box2外面镶嵌一个相同大小的boxWrap,用来设置margin。）

2.给box2设置元素类型为display：table-cell;（解释：使box2的元素类型转为跟td一样的元素类型，拥有td一样的特性，td虽然不支持margin，但是可以直接应用vertical-align属性。），给box2添加属性vertical-align:middle;

给box2里面的元素(在本例子中即是p元素)添加display：inline-block;(vertical-align：middle;只对行内元素有效）

这样就能实现box2里面的元素垂直居中

3.如果想要box2里面的元素实现水平居中，给boxWrap或者box2添加text-align:center;

完成以上步骤，就能实现水平垂直居中了。

例子如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .boxWrap{
                width: 500px;
                height: 500px;
                background: red;
                margin: 0 auto;
            }
            .boxWrap .box2{
                width: 500px;
                height: 500px;
                background: green;
                display: table-cell;
                vertical-align: middle;
                text-align:center;
            }
            .boxWrap .box2 p{
                display: inline-block;
                width: 200px;
                background:red;
            }
        </style>
    </head>
    <body>
        <div class="boxWrap">
            <div class="box2">
                <p>表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法表格属性方法</p>
            </div>
        </div>
    </body>
</html>

运行截图：

 

posted @ 2020-03-01 00:19  我是乐呀  阅读(597)  评论(0)    收藏  举报