元素居中的一种特殊方法

通过给需要居中的元素加入如下属性：使用此种方法，该元素会相对第一个具有定位环境的父元素居中

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.fat{width: 500px;height: 500px;border: solid 1px black;position: relative;}.sub{width: 100px;height: 100px;border: solid 1px red;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}</style>
</head>
<body><div class="fat"><div class="sub"></div></div>
</body>
</html>

转载于:https://www.cnblogs.com/huwt/p/10947197.html

元素居中的一种特殊方法相关推荐

css图片居中_网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析一个元素,它有可能有背景,那我要它的背景居中对齐 ...
html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
CSS元素居中的5种方法分享。
转自:微点阅读 https://www.weidianyuedu.com 经常碰到有人在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参 ...
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
CSS绝对定位元素居中的几种方法
CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body><div style="position: absolute; left: 5 ...
absolute定位css元素居中的两种方法
1(上下左右居中,不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 2(上下左右居中,可微调) posit ...
利用CSS让元素垂直居中的两种实现方法
利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之 ...
页面中元素居中定位的几种方法
元素居中定位的几种方法元素居中定位的几种方法方法一父元素子元素方法二父元素子元素元素居中定位的几种方法方法一父元素 position: relative; 子元素 position ...

元素居中的一种特殊方法

元素居中的一种特殊方法相关推荐

最新文章

热门文章