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

最新推荐文章于 2022-08-01 15:38:46 发布

霜月枫桥

最新推荐文章于 2022-08-01 15:38:46 发布

阅读量6.2k

点赞数 3

分类专栏： CSS&CSS3

本文链接：https://blog.csdn.net/MOONCOM/article/details/54907812

版权

CSS&CSS3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、对于行内元素

若该行内元素只有一行，且该行内元素父元素的高度一定，可以设置该行内元素的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元素水平居中方法详解