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

2024-04-27 15:10:19

字体：大中小

来源：转载

供稿：网友

一、对于行内元素

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

二、对于块元素

块元素有两种实现方法：设置vertical-align属性；使用position属性进行绝对定位。

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

td{     vertical-align:middle;}2、对于普通的<div>元素，首先设置该<div>元素display:table-cell;然后便可以使用vertical-align属性进行水平居中。
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>4、设置该块级元素的position属性
首先，设置块级元素<div>的父元素的position:relative；其次，设置块级元素<div>的CSS为：position:absolute;top:50%;left:50%;假设该块级元素<div>width:200px;height:80px;最后，设置该块级元素<div>的外边距：margin:-40px 0px 0px -100px;//因为块级元素<div>的绝对定位是以块级元素<div>的左上角为基准的，所以要通过外边距减去搜索框长和宽的一半。

上一篇：Google翻译网站

下一篇：Atom 在 linux 下安装有几率侧边栏默认显示在右侧，移动到左侧的设置方法