css中浮动元素和div的绝对定位居中

CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

绝对定位含义

CSS中有一个专业名词叫绝对定位，absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static ( position 的默认值为 static ) 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

div居中：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

浮动元素的上下左右居中：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

绝对定位的左右居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

更多请关注亿速云其它相关文章！