使元素水平垂直居中的实现方法

方案一：

　　知晓元素的宽高的情况下，可以使用：

div{position:absolute;left:50%;top:50%;margin-top:0.5*height;margin-left:0.5*width;
}

　　这种方法兼容性更好，但是使用上不够简便，而且需要明确知道元素的自身宽高。

方案二：

　　不知道元素的宽高的解决办法：

div{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
}

　　这种办法无需知道元素自身的宽高（但被设置的元素需要是图片这类的自带宽高的元素），使用上很方便，处理大批量的不确定尺寸的图片类元素时会更有优势，但对旧版的IE支持不好。所以在兼容性上需要谨慎。

　　无论使用哪种方式，如果要使浮动的元素相对父元素居中，则父元素的position需要为absolute或者relative，否则，浮动的元素会相对窗口居中。

转载于:https://www.cnblogs.com/ihaveahammer/p/4198623.html

使元素水平垂直居中的实现方法相关推荐

CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
块级、行内元素水平垂直居中方法
块级.行内元素水平垂直居中方法块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
总结div里面水平垂直居中的实现方法
最近经常碰到要垂直居中的问题,所以想着总结一下:关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: < ...
CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...
css实现元素水平垂直居中——6种方式
实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值利用定位+transform table布局 flex布局 grid布局利用定位+margin:auto ...
CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素( ...
CSS块元素水平垂直居中的实现技巧
针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...

使元素水平垂直居中的实现方法

使元素水平垂直居中的实现方法相关推荐

最新文章

热门文章