设置页面元素垂直居中的几种方法

一、对于行内元素

若该行内元素只有一行,且该行内元素父元素的高度一定,可以设置该行内元素的line-height属性,属性值为父元素的高度。


二、对于块元素

通过设置vertical-align属性实现垂直居中。

1、在<table>元素的<td>中使用vertical属性。

td{
     vertical-align:middle;
}

2、对于普通的<div>元素,首先设置该<div>元素display:table-cell;然后便可以使用vertical-align属性进行垂直居中。

注意:使用该方法时,不能设置该元素浮动 float 或进行绝对定位 position,否则无法垂直居中。

div{
      display:table-cell;
      vertical-align:middle;
}


3、可以设置行内块级元素的vertical-align,从而设置该元素的 顶部/中部/底部 与其它行内元素对齐。

备注:该方法相当于在行内元素中插入图片。

代码和效果图如下所示:

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .div1{
       	display: inline-block;
       	vertical-align: middle;
       	background-color: red;
       }
	</style>
</head>
<body>
	assssssfdsfsdf<div class="div1">hasdkjagsdhjagdk<br>asdasd</div>qwdasfasdf
</body>


三、对行内元素、块级元素都有效。

通过绝对定位 position 与其它属性的组合使用实现垂直居中;

使用弹性伸缩布局。

1、设置元素的position+margin属性,

分为两种情况,一种是已知元素高度时,一种是未知元素高度时
1.1、使用场景:要垂直居中元素的长、高值确定时

首先,设置块级元素<div>的父元素的 position:relative;
其次,设置块级元素<div>的css为:position:absolute;top:50%;left:50%;
假设该块级元素<div>  width:200px;height:80px;
最后,设置该块级元素<div>的外边距:margin:-40px 0px 0px -100px;
备注:因为块级元素<div>的绝对定位是以块级元素<div>的左上角为基准的,所以要通过外边距减去搜索框长和宽的一半。

1.2、使用场景:元素的长、高值不确定时

首先,设置块级元素<div>的父元素的 position:relative;
其次,设置块级元素<div>的css为:position:absolute;top:0;bottom:0;margin:auto;
假设该块级元素<div>已完成垂直居中


2、设置元素的position+transform属性

使用场景:针对流体式、响应式布局,要居中元素的高、宽值不确定时

首先,设置块级元素<div>的父元素的 position:relative;
其次,设置块级元素<div>的css为:position:absolute;top:50%;left:50%;
最后,设置该块级元素<div>的transform:transform:translate(-50%,50%);

3、弹性伸缩布局

使用场景:响应式布局

设置父元素的CSS属性 display:flex;  justify-content:center;

示例代码如下:

<div class="div3">
        <div class="div4">
            
        </div>
    </div>
    <style>
    .div3{
        border:1px solid black;
        height:400px;
        display: flex;
        justify-content:center;
    }
    .div4{
        width:90%;
        height:80%;
        border:1px solid black;
        background-color:orange;
    }
    </style>

设置页面元素水平居中的几种方法HTML元素水平居中方法详解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值