首页 » CSS » css 几种水平垂直居中的方法 及 弹性盒子

css 几种水平垂直居中的方法 及 弹性盒子

2017-06-29 17:20:05阅读(592)

1. margin :auto 方法
给   要居中的元素   设置 margin :auto
绝对定位  position :absolute;
top:0;bottom:0;left: 0px;right: 0px;
 ****父元素要设置相对定位****
2. 负 margin 的方法

绝对定位 position :absolute;
top:50%; left: 50%px;
margin-top:-高度的一般;
margin-left:负宽度的一半

3. display :table-cell 法
这个方法主要对父元素设置的比较多
父元素:  display :table-cell;
             vertical-align:middle;
             text-align:center;
要居中的元素:   
            vertical-align:middle;
4.弹性盒子法 display :flex;

(1)这个对父元素设置css就可以了
display :flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center ;
(2)父元素设置display :flex;子元素设置margin:auto
父元素 {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

要居中的元素 {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}

弹性盒子

弹性盒子设置
display: -webkit-flex;
display: flex;

如果父元素设置了display 属性的值为 flex ,如果子元素未设置宽度,那么所有子元素的宽度都是一样的宽度

1.给body 设置 direction: rtl;
direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变,页面布局也跟着改变

2.flex-direction 顺序指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row:横向从左到右排列(左对齐),默认的排列方式。
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
column:纵向排列。
column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹