html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...

在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。

css绝对定位居中的实现方法有很多，下面将给大家介绍css绝对定位居中的四种方法。

1、兼容性不错的主流css绝对定位居中的用法：.conter{

width: 600px; height: 400px;

position: absolute; left: 50%; top: 50%;

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

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

}

注意：这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

2、css3的出现，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样实现css绝对定位居中：.conter{

width: 600px; height: 400px;

position: absolute; left: 50%; top: 50%;

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

}

3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto).conter{

width: 600px; height: 400px;

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

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

}

4、使用css3盒模型:flex布局实现css绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。

本篇文章到这里就结束了，关于定位的更多内容可以参考css手册。

html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...相关推荐

css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
如何把html和css 结合,css-css和html的结合方式（四种结合方式）
(1)在每个html标签上面都有一个属性 style,把css和html结合在一起我是一只小小鸟 (2)使用html的一个标签实现, css代码; div { background-color:re ...
CSS总结div中的内容垂直居中的四种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
CSS中的外边距折叠问题及其4种解决方法总结（完整版）
外边距折叠一.概念二.兄弟元素三.父子元素四.四种解决方案一.概念一般是指垂直方向相邻的外边距会发生重叠现象,大多发生在兄弟元素和父子元素之间. 二.兄弟元素 box2是box1的兄弟元素 ...
CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
【必看】HTML+CSS去掉img图片底部的空白的3种通用方法
去掉img图片底部的空白的3种通用方法效果如图: 图片下方有莫名的空白,总是去不掉! 空白产生的原因:图片是内联元素,默认带有一定的间距,间距与文字字体有一定的关系. 因此,基于此原因有一下解决方法 ...
css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用,并且得到了广泛的支持.该b ...
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...
Absolute 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...

html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...

html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...相关推荐

最新文章

热门文章