css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程

在网页进行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绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。

这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效，游戏，插件封装，设计模式到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2020最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

学习前端，我们是认真的

css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程相关推荐

html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...
在网页进行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 ...
HTML5前端期末大作业：个人摄影网站设计——婚纱摄影(28页) HTML+CSS+JavaScript 学生DW网页设计作业成品 HTML静态网页作业 web前端期末大作业
HTML5期末大作业:个人摄影网站设计--婚纱摄影(28页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
什么是css选择器？css3中5种常见的基本选择器-web前端教程
本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...
web前端教程：css实现容器高度适应屏幕高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
CSS中的外边距折叠问题及其4种解决方法总结（完整版）
外边距折叠一.概念二.兄弟元素三.父子元素四.四种解决方案一.概念一般是指垂直方向相邻的外边距会发生重叠现象,大多发生在兄弟元素和父子元素之间. 二.兄弟元素 box2是box1的兄弟元素 ...
CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
【必看】HTML+CSS去掉img图片底部的空白的3种通用方法
去掉img图片底部的空白的3种通用方法效果如图: 图片下方有莫名的空白,总是去不掉! 空白产生的原因:图片是内联元素,默认带有一定的间距,间距与文字字体有一定的关系. 因此,基于此原因有一下解决方法 ...

css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程

css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程相关推荐

最新文章

热门文章