css使div元素水平并垂直的方法（4种）

这里以一个120x120的div块状物体做测试

法1：

position:absolute;
left:0;top:0;right:0;bottom:0;
margin:auto

法2：

position:absolute;
left:50%;
top:50%;
margin-left:-60px;
margin-top:-60px

法3：

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

法4：
以下代码加到div父元素上才能生效

display:flex;
justify-content:center;//水平
align-items:center;//垂直

css使div元素水平并垂直的方法（4种）相关推荐

html怎么设置一个div可以左右移动,利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
用CSS使DIV水平居中
一,用CSS使DIV层水平居中对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 这样在FF中已经居中了,可是在IE中看 ...
学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法一.行高(line-height)法二.内边距(padding)法三.模拟表格法四.CSS3的transform来实现五:css3的box方法实 ...
[css] 用css给一个元素加边框有哪些方法？
[css] 用css给一个元素加边框有哪些方法? :scope {border: 3px solid black;box-shadow: 0 0 0 1px black; /*不影响布局,无限叠加*/ ...
js获取div元素高度和宽度的方法
前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生JS与JQ如何快速的获取DIV元素的高度和宽度的方法. js获取div元素高度与宽度的方法 js获取div元素的高 ...
div块内的CSS中心文本（水平和垂直）
我将div设置为display:block ( height和width 90px ),并且里面有一些文本. 我需要文本在垂直和水平方向上居中对齐. 我尝试了text-align:center ,但是 ...
html使div内部元素水平排列_实现元素水平排列的六种方法
众所周知,块级元素默认是垂直排列的,行内元素是水平排列的,而在布局时基本上都是用块级元素,如div等常用块级标签,那么如何让块级元素也进行水平排列呢?这篇文章给大家介绍六中方式,实现块级元素的水平排列 ...
CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...

css使div元素水平并垂直的方法（4种）

css使div元素水平并垂直的方法（4种）相关推荐

最新文章

热门文章