html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）

1.css实现居中

缺点：需要提前知道元素的宽度和高度。

Document

.box{

width: 600px;

height: 400px;

position: absolute;

left: 50%; top: 50%;

border:1px solid #000;

background:red;

margin-top: -200px; /* 高度的一半 */

margin-left: -300px; /* 宽度的一半 */

}

2、css3实现水平垂直居中

注意：无论元素的尺寸是多少，都可以居中。不过IE8以上才兼容这种写法，移动端可忽略。

Document

.box{

width: 600px;

height: 400px;

position: absolute;

left: 50%;

top: 50%;

border:1px solid #000;

background:red;

transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */

}

3、margin：auto实现居中

Document

.box{

width: 600px;

height: 400px;

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

border:1px solid #000;

background:red;

margin: auto; /* 有了这个就自动居中了 */

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）相关推荐

[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
文章目录一.问题提出二.绝对定位居中设置 1.设置固定尺寸 2.先偏移50%再回退固定值三.绝对定位元素水平 / 垂直居中一.问题提出绝对定位不能通过设置 margin: auto ...
元素的水平垂直居中解决方法
有时候为了使页面元素看起来更美观,常常会让元素水平居中,垂直居中.下面总结了几个常用的方法. 首先HTML结构如下: 1 <div class="out"> 2 < ...
CSS让一个元素水平垂直居中，到底有多少种方案？
CSS水平垂直居中的方案水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: (1)width和margin实现.margin: 0 auto; (2)绝对定位 ...
css居中的几种方法_CSS几种常用的水平垂直居中对齐方法
文字的水平垂直居中 class="content"> <p>文字水平垂直居中p> </div> .content{ width: 400px; ...
jsp文字上下居中显示_表单元素input、按钮、文字完美垂直居中对齐方法
本文最终总结出来办法就是要对齐的表单内容(含文字.图片.表单各种元素.label)字体设置为Tahoma,则可以完美的实现对齐(Verdana等字体也可以),其中个别的input元素如radio的pa ...

html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）

html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）相关推荐

最新文章

热门文章