弹性盒子

设置弹性容器的
主轴对齐属性：justify-content:center
交叉轴的对其属性：align-items:center

.perent{position: absolute;display: flex;display: -webkit-flex;width: 500px;height:500px;justify-content: center;align-items: center;background: green;flex-direction: row-reverse; flex-wrap: wrap;justify-content: center;align-items: center;}.left,.right{flex:1 1 200px;width: 100px;height: 100px;background: red;}.middle{flex-grow: 1;height: 100px;background: blue;}

position:absolute

设置父元素position:absolute或者relative;
设置该元素：position:absolute;
left:50%;
right:50%;
margin-left:-该元素的边长0.5倍
margin-top：-该元素的边长0.5倍

.con{position: absolute;width: 200px;height: 200px;bottom: 0;background: green;}.middle{width: 100px;height: 100px;background: blue;position: absolute;left:50%;top:50%;margin-left: -50px;margin-top: -50px; }

fixed+margin:auto

设置要对齐的元素的
position:fixed;
left:0;
right:0;
top:0;
bottom: 0;
margin: auto;

.middle{/*flex-grow: 1;*/width: 100px;height: 100px;background: blue;position: fixed;left:0;right:0;top:0;bottom: 0;margin: auto;}

弹性盒子与其他传统的对比：

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

css居中对齐的几种方法相关推荐

css居中对齐的几种情况(待补充
1.一般情况可以采用转换为块级元素来 (并且此时盒子已经给了宽高) display: block; /*注意只有块级元素可用行内块行内元素都不行*/margin: 100px auto; ...
css中div居中显示的四种方法
css中设置div元素居中显示的四种方法一.先确定div的基本样式二.具体实现方法第一种:利用子绝父相和margin: auto实现第二种:利用子绝父相和过渡动画tranform实现第三种: ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法 1.设定行高(line-height) 2.设置伪元素::before 3.absolute + transform 4. 设置绝对定位 5.设置display:flex ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
CSS画心形的三种方法，超级简单
CSS画心形的三种方法,超级简单一.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素首先,我们在页面上先写出一个div 使用CSS,将这个div变为一个橘红色的正方形: 接着我们 ...
css画心形原理,CSS画心形的三种方法
下面,介绍三种CSS画心形的方法.实现过程都非常简单,保证你一看就会. 1.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素. 首先,我们在页面上先写出一个div: 使用CSS,将这 ...

css居中对齐的几种方法