垂直居中对齐四种样式

垂直居中对齐

传统的:(需要设置盒子的宽高)

div {position: absolute;top:50%;left:50%;margin-left: -50%; // 元素的自身宽的一半margin-top: -50%; // 元素的自身高的一半}

特殊的:

div {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}

css3:

 div {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}

flex:给父元素设置

     div {display: flex;justify-content:center;align-items: center;}

垂直居中对齐四种样式相关推荐

CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
CSS中的四种样式及选择器
CSS语法选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性属性值:属性值包括法定属 ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
css的四种样式及其优先级
目录 1.行内样式代码 2.内嵌样式代码 3.外链样式代码 4.导入样式 5.四种样式的优先级 1.行内样式行内样式又叫标签样式,它是在标签里面加上style属性代码 <body> ...
HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
CSS总结div中的内容垂直居中的四种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
React中的四种样式使用优缺点比较
1.组件化天下下的CSS css的设计就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方式. 组件化中选择合适的CSS解决方案应该符合以下条件: 1.可以编写局部的css:c ...
清除浮动的四种样式写法
/* 清除浮动1 */ /* 添加额外标签使用 */ .clear { clear: both; } /* 清除浮动样式2 */ .clearfix { overflow: auto; /* over ...
多行文字垂直居中实现--四种方法
1. 将父元素设置为块级表格来显示display:table;子元素设置为表格单元格来显示,设置vertical-align: middle. <div style="margin: ...

垂直居中对齐四种样式

垂直居中对齐

垂直居中对齐四种样式相关推荐

最新文章

热门文章